@ihatecode/react-splitter

Englist | 中文

Introduction

A split pane component written in React.

Install

# npm
npm install @ihatecode/react-splitter
# yarn
yarn add @ihatecode/react-splitter
# pnpm
pnpm add @ihatecode/react-splitter

Usage

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

const App: React.FC = () => {
  return (
    <Splitter
        items={[
            {
                size:200,
                min:100,
                max:300,
                content:<div>Left</div>
            },
            {
                size:'50%',
                min:'25%',
                max:'75%',
                content:<div>Right</div>
            }]
        }
    />
  );
};

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||