Skip to content

ashxjs/split-view

Repository files navigation

logo

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

logo

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