@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