Best of JS • Flexboard

...

Flexboard

React component library for re-sizable sidebars

React

Layout

Drag and drop

Loading data...

README

Loading README.md

View Flexboard on GitHub

Loading project details...

Flexboard

React component library for re-sizable sidebars

React

Layout

Drag and drop

GitHub

266

dorbus/flexboard

Created 3 years ago, last commit 2 years ago

2 contributors

104 commits

ISC License

Stars added on GitHub, month by month

Click on the bars to view the numbers

-1

Oct

Nov

Dec

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

2024

2025

Stars added on GitHub, per day, on average

Yesterday

Last week

0.0

/day

Last month

0.0

/day

Last 12 months

0.0

/day

Package on NPM

@dorbus/flexboard

1.1.2

Monthly downloads on NPM

Click on the bars to view the numbers

179

119

201

243

307

229

136

388

201

190

184

Oct

Nov

Dec

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

2024

2025

Loading data...

README

GitHub release (latest by date including pre-releases

GitHub package.json dependency version (prod)

React component library for re-sizable sidebars

Flexboard-Skeleton

Demo

Installation

yarn

yarn add @dorbus/flexboard

npm

npm install @dorbus/flexboard

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.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
    </FlexboardProvider>

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.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
            <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
    </FlexboardProvider>

Left-Right Sidebar

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

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Left-Sidebar</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
             <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Right-Sidebar</div>
            </Flexboard>
    </FlexboardProvider>

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

Aniket Pathak

Stargazers

Forkers

Copyright & License

Loading README.md

View Flexboard on GitHub

React component library for re-sizable sidebars

Flexboard-Skeleton

Demo

Installation

yarn

yarn add @dorbus/flexboard

npm

npm install @dorbus/flexboard

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.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
    </FlexboardProvider>

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.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
            <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
    </FlexboardProvider>

Left-Right Sidebar

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

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Left-Sidebar</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
             <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Right-Sidebar</div>
            </Flexboard>
    </FlexboardProvider>

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`