React Slide Pane

Split-Pane React component, can be nested or split vertically or horizontally and diff image!

Preview in storybook →

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import SlidePane from 'react-slide-pane'

ReactDOM.render(
  <>
    <SlidePane width={600} height={400} split="vertical" initial="200px">
      <img src="https://jdc.jd.com/img/600x400?text=1" />
      <img src="https://jdc.jd.com/img/600x400?text=2" />
    </SlidePane>
  </>,
  mountNode
)

API

| Name | Type | Default | Description | | :------: | :-----------: | :--------: | :------------------------------------------------------------: | | width | number | 600 | The width of pane conmponent | | height | number | 400 | The height of pane conmponent | | initial | number / string | 200 | The initial position of resizer | | split | string | vertical | If split is equal to horizontally, the resizer will be horizontally. | | children | React.Element | undefied | The children of slide pane coms |

Reference

react-split-pane

react-component/slider

react-split-pane-v2