react-slide-pane

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

Usage no npm install needed!

<script type="module">
  import reactSlidePane from 'https://cdn.skypack.dev/react-slide-pane';
</script>

README

React Slide Pane

Commitizen friendly Codepen Preview lerna

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

Preview in storybook →

React Slide Pane Demo

Usage

Edit ReactSlidePane

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