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 |