Skip to content

dorbus/flexboard

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 8, 2022 12:49
October 29, 2022 12:15
img
January 21, 2023 15:07
src
February 5, 2023 12:46
November 1, 2022 00:51
November 5, 2022 15:14
November 5, 2022 20:27
November 3, 2022 19:20
November 5, 2022 15:24
November 8, 2022 13:04
January 21, 2023 15:07
November 5, 2022 15:24
November 3, 2022 19:13
November 3, 2022 19:13
November 3, 2022 19:13
Flexboard Logo

Flexboard

GitHub GitHub release (latest by date including pre-releases GitHub top language GitHub Repo forks GitHub Repo stars GitHub package.json dependency version (prod) GitHub Repo stars Github Repo Sponsors

React component library for re-sizable sidebars

Flexboard-Skeleton

Flexboard Logo

Demo

Flexboard Logo

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

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.