Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dorbus/flexboard

React component library for re-sizable sidebars
https://github.com/dorbus/flexboard

flexible-sidebar npm-package react-component react-component-library react-flexible-sidebar react-resizable-sidebar react-sidebar react-sidebar-menu resizable-sidebars

Last synced: 13 days ago
JSON representation

React component library for re-sizable sidebars

Host: GitHub
URL: https://github.com/dorbus/flexboard
Owner: dorbus
License: isc
Created: 2022-10-29T06:45:07.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-07-31T10:17:01.000Z (over 1 year ago)
Last Synced: 2024-04-27T05:40:40.497Z (7 months ago)
Topics: flexible-sidebar, npm-package, react-component, react-component-library, react-flexible-sidebar, react-resizable-sidebar, react-sidebar, react-sidebar-menu, resizable-sidebars
Language: TypeScript
Homepage: https://dorbus.github.io/flexboard-example/
Size: 10 MB
Stars: 265
Watchers: 2
Forks: 14
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        



























React component library for re-sizable sidebars




## Flexboard-Skeleton







## Demo







## Installation

### yarn

```bash

yarn add @dorbus/flexboard

```

### npm

```bash

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.

```tsx

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';

    

            

                
Flexboard Content

            

            

                Frame Content

            

    

```

### 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.

```tsx

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';

    

            

                
Frame Content

            

            

                Flexboard Content

            

    

```

### Left-Right Sidebar

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

```tsx

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';

    

            

                
Left-Sidebar

            

            

                Frame Content

            

             

                Right-Sidebar

            

    

```

## 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](https://img.shields.io/github/followers/divshekhar.svg?style=social&label=Follow)](https://github.com/divshekhar/)

### Aniket Pathak

 

[![GitHub followers](https://img.shields.io/github/followers/aniketpathak028.svg?style=social&label=Follow)](https://github.com/aniketpathak028/)

## Stargazers

[![Stargazers repo roster for @dorbus/flexboard](https://reporoster.com/stars/dark/dorbus/flexboard)](https://github.com/dorbus/flexboard/stargazers)

## Forkers

[![Forkers repo roster for @dorbus/flexboard](https://reporoster.com/forks/dark/dorbus/flexboard)](https://github.com/dorbus/flexboard/network/members)

## Copyright & License

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