kbsbroad / flexboard

React component library for re-sizable sidebars

Flexboard

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

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