Flexboard

React component library for re-sizable sidebars

Drag and dropLayoutReact
dorbus/flexboarddorbus.github.io/flexboard-example/@dorbus/flexboard

README

Flexboard


React component library for re-sizable sidebars


Flexboard-Skeleton


Flexboard Logo

## Demo

Flexboard Logo


Installation


yarn


  1. ```bash
  2. yarn add @dorbus/flexboard
  3. ```

npm


  1. ```bash
  2. npm install @dorbus/flexboard
  3. ```


Usage


To use Flexboard in your application first import FlexboardProvider, FlexboardFrame and Flexboard.

Left Sidebar


To use Left Sidebar FlexboardFrame component must be used below the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to left.

  1. ```tsx
  2. import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
  3.     <FlexboardProvider>
  4.             <Flexboard
  5.             direction={Position.left}
  6.             draggable={true}
  7.             width={400}
  8.             minWidth={200}
  9.             maxWidth={600}
  10.             flexboardStyle={{ backgroundColor: "#f2f3f4" }}
  11.             resizerStyle={{ backgroundColor: "pink" }}
  12.             resizerType={ResizerType.gutterlane}
  13.             >
  14.                 <div>Flexboard Content</div>
  15.             </Flexboard>
  16.             <FlexboardFrame>
  17.                 <div>Frame Content</div>
  18.             </FlexboardFrame>
  19.     </FlexboardProvider>
  20. ```

Right Sidebar


To use Right Sidebar FlexboardFrame component must be used above the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to right.

  1. ```tsx
  2. import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
  3.     <FlexboardProvider>
  4.             <FlexboardFrame>
  5.                 <div>Frame Content</div>
  6.             </FlexboardFrame>
  7.             <Flexboard
  8.             direction={Position.right}
  9.             draggable={true}
  10.             width={400}
  11.             minWidth={200}
  12.             maxWidth={600}
  13.             flexboardStyle={{ backgroundColor: "#f2f3f4" }}
  14.             resizerStyle={{ backgroundColor: "pink" }}
  15.             resizerType={ResizerType.gutterlane}
  16.             >
  17.                 <div>Flexboard Content</div>
  18.             </Flexboard>
  19.     </FlexboardProvider>
  20. ```

Left-Right Sidebar


To use Left-Right Sidebar FlexboardFrame component must be used in between the Flexboard left and right components inside FlexboardProvider.

  1. ```tsx
  2. import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
  3.     <FlexboardProvider>
  4.             <Flexboard
  5.             direction={Position.left}
  6.             draggable={true}
  7.             width={400}
  8.             minWidth={200}
  9.             maxWidth={600}
  10.             flexboardStyle={{ backgroundColor: "#f2f3f4" }}
  11.             resizerStyle={{ backgroundColor: "pink" }}
  12.             resizerType={ResizerType.gutterlane}
  13.             >
  14.                 <div>Left-Sidebar</div>
  15.             </Flexboard>
  16.             <FlexboardFrame>
  17.                 <div>Frame Content</div>
  18.             </FlexboardFrame>
  19.              <Flexboard
  20.             direction={Position.right}
  21.             draggable={true}
  22.             width={400}
  23.             minWidth={200}
  24.             maxWidth={600}
  25.             flexboardStyle={{ backgroundColor: "#f2f3f4" }}
  26.             resizerStyle={{ backgroundColor: "pink" }}
  27.             resizerType={ResizerType.gutterlane}
  28.             >
  29.                 <div>Right-Sidebar</div>
  30.             </Flexboard>
  31.     </FlexboardProvider>
  32. ```


API


Component Prop Type Description Default
Flexboard direction Position Flexboard position left
draggable boolean Flexboard is resizable or not false
width number Initial width of flexboard 200px
minWidth number Minimum width of draggable flexboard 150
maxWidth number Maximum width of draggable flexboard 300
flexboardStyle CSS Pass custom sidebar styles -
resizerStyle CSS Pass custom resizer styles -
resizerType ResizerTypes Choose a resizer type:
  • line
  • shadowline
  • lane
  • gutterlane
 line

Project Created & Maintained By


Divyanshu Shekhar



GitHub followers

Aniket Pathak



GitHub followers

Stargazers


Stargazers repo roster for @dorbus/flexboard

Forkers


Forkers repo roster for @dorbus/flexboard

Copyright & License


Code and documentation Copyright (c) ISC © 2022 Dorbus.