@ihatecode/react-splitter

Englist | 中文

Introduction

A split pane component written in React.

Install

``sh

npm

npm install @ihatecode/react-splitter

yarn

yarn add @ihatecode/react-splitter

pnpm

pnpm add @ihatecode/react-splitter
`

Usage

`jsx
import React from 'react';
import Splitter from '@ihatecode/react-splitter';
import '@ihatecode/react-splitter/lib/style.css';

const App: React.FC = () => {
return (
items={[
{
size:200,
min:100,
max:300,
content:

Left

},
{
size:'50%',
min:'25%',
max:'75%',
content:

Right

}]
}
/>
);
};

export default App;
``

Demo

Online demo: https://rg4jgy.csb.app/


Props

#### Splitter props
|Property|Type|Optional|Default|
|-|-|:-:|:-:|
|resizable|boolean|Y|true|
|className|string|Y||
|style|object|Y||
|direction|'horizontal', 'vertical'|Y|'horizontal'|
|splitbar|object|Y||
|items|Array|N||
|onResize|(sizes: { px: number, percent: number }[]) => void|Y||

#### Splitbar props
|Property|Type|Optional|Default|
|-|-|:-:|:-:|
|size|number|Y|1|
|color|string|Y|'#eee'|

#### Splitter Item props
|Property|Type|Optional|Remark|
|-|-|:-:|-|
|key|number/string|Y||
|size|number/string|Y|px: 100 or '100px'; percent: '50%'|
|min|number/string|Y|same as 'size'|
|max|number/string|Y|same as 'size'|
|resizable|boolean|Y|true|
|content|any|N||