ashxjs / split-view

Simple react split-view component

Split View

Simple react split view component with a draggable separator. Easy to add in your favorite project. Lightweight library.

Summary

1. Installation
2. Adding Split View in your project

How to install Split View component

---

With NPM as package manager

NPM below 5.0.0

npm install --save @ashxjs/split-view 

NPM above 5.0.0

npm install @ashxjs/split-view 

With Yarn as package manager

yarn add @ashxjs/split-view

---

Using Split-View component

Easy to use

Code Example

import LeftComponent from "./LeftComponent";
import RightComponent from "./RightComponent";

const defaultPanelWidth = window.screen.widh / 3;

<>
    <SplitView
        left={LeftComponent}
        right={RightComponent}
        defaultLeftPanelWidth={defaultPanelWidth}
        />
</>

Component Props

Props name	Default value	Description
left	none	Left component to render
right	none	Right component to render
defaultLeftPanelWidth	none	Initialize the default left panel size when component first render