{"id":13495540,"url":"https://github.com/dorbus/flexboard","last_synced_at":"2025-03-28T16:32:54.619Z","repository":{"id":62734576,"uuid":"559132893","full_name":"dorbus/flexboard","owner":"dorbus","description":"React component library for re-sizable sidebars","archived":false,"fork":false,"pushed_at":"2023-07-31T10:17:01.000Z","size":10529,"stargazers_count":265,"open_issues_count":2,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-27T05:40:40.497Z","etag":null,"topics":["flexible-sidebar","npm-package","react-component","react-component-library","react-flexible-sidebar","react-resizable-sidebar","react-sidebar","react-sidebar-menu","resizable-sidebars"],"latest_commit_sha":null,"homepage":"https://dorbus.github.io/flexboard-example/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dorbus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-10-29T06:45:07.000Z","updated_at":"2024-04-10T07:13:33.000Z","dependencies_parsed_at":"2024-01-14T08:15:19.533Z","dependency_job_id":null,"html_url":"https://github.com/dorbus/flexboard","commit_stats":{"total_commits":80,"total_committers":4,"mean_commits":20.0,"dds":0.475,"last_synced_commit":"4a1bed6dcc9a25945a241488074bce74b3558d5a"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dorbus%2Fflexboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dorbus%2Fflexboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dorbus%2Fflexboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dorbus%2Fflexboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dorbus","download_url":"https://codeload.github.com/dorbus/flexboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221968666,"owners_count":16909278,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexible-sidebar","npm-package","react-component","react-component-library","react-flexible-sidebar","react-resizable-sidebar","react-sidebar","react-sidebar-menu","resizable-sidebars"],"created_at":"2024-07-31T19:01:35.698Z","updated_at":"2024-10-31T10:31:17.094Z","avatar_url":"https://github.com/dorbus.png","language":"TypeScript","readme":"\u003cdiv align='center'\u003e\n\u003cimg width=\"300\" height=\"300\" alt=\"icon\" src=\"https://github.com/dorbus/flexboard/assets/74519511/27b6f40f-6b4a-4ea3-b8c6-ed56b7fda529\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003c!-- Repository stats --\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/dorbus/flexboard?style=plastic\"\u003e\n\n\u003cimg alt=\"GitHub release (latest by date including pre-releases\" src=\"https://img.shields.io/github/v/release/dorbus/flexboard?include_prereleases\"\u003e\n\n\u003cimg alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/dorbus/flexboard?style=plastic\"\u003e\n\n\u003cimg alt=\"GitHub Repo forks\" src=\"https://img.shields.io/github/forks/dorbus/flexboard?style=plastic\"\u003e\n\n\u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/dorbus/flexboard?style=plastic\"\u003e\n\n\u003cimg alt=\"GitHub package.json dependency version (prod)\" src=\"https://img.shields.io/github/package-json/dependency-version/dorbus/flexboard/react?style=plastic\"\u003e\n\n\u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/contributors-anon/dorbus/flexboard\"\u003e\n\n\u003cimg alt=\"Github Repo Sponsors\" src=\"https://img.shields.io/github/sponsors/dorbus?style=plastic)\"\u003e\n\n\u003ch3\u003eReact component library for re-sizable sidebars\u003c/h3\u003e\n\n\u003c/div\u003e\n\n\u003c!-- Flexboard-Skeleton --\u003e\n\n## Flexboard-Skeleton\n\n\u003cdiv align='center'\u003e\n\u003cimg width=\"600\" height=\"300\" alt=\"icon\" src=\"https://github.com/dorbus/flexboard/assets/74519511/074b0691-95c7-42db-b137-34e6bbc171c4\"\u003e\n\u003c/div\u003e\n\n\u003c!-- Demo --\u003e\n\n## \u003ca href=\"https://dorbus.github.io/flexboard-example/\"\u003eDemo\u003c/a\u003e\n\n\u003cdiv align='center'\u003e\n\u003cimg width=\"700\" height=\"300\" alt=\"icon\" src=\"https://github.com/dorbus/flexboard/assets/74519511/7ae9f947-79bd-4b5d-a910-57c48e2c711e\"\u003e\n\u003c/div\u003e\n\n\u003c!-- Installation --\u003e\n\n## Installation\n\n### yarn\n\n```bash\nyarn add @dorbus/flexboard\n```\n\n### npm\n\n```bash\nnpm install @dorbus/flexboard\n```\n\n\u003c!-- Usage --\u003e\n\n## Usage\n\nTo use Flexboard in your application first import `FlexboardProvider`, `FlexboardFrame` and `Flexboard`.\n\n### Left Sidebar\n\nTo 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.\n\n```tsx\nimport { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';\n    \u003cFlexboardProvider\u003e\n            \u003cFlexboard\n            direction={Position.left}\n            draggable={true}\n            width={400}\n            minWidth={200}\n            maxWidth={600}\n            flexboardStyle={{ backgroundColor: \"#f2f3f4\" }}\n            resizerStyle={{ backgroundColor: \"pink\" }}\n            resizerType={ResizerType.gutterlane}\n            \u003e\n                \u003cdiv\u003eFlexboard Content\u003c/div\u003e\n            \u003c/Flexboard\u003e\n            \u003cFlexboardFrame\u003e\n                \u003cdiv\u003eFrame Content\u003c/div\u003e\n            \u003c/FlexboardFrame\u003e\n    \u003c/FlexboardProvider\u003e\n```\n\n### Right Sidebar\n\nTo 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.\n\n```tsx\nimport { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';\n    \u003cFlexboardProvider\u003e\n            \u003cFlexboardFrame\u003e\n                \u003cdiv\u003eFrame Content\u003c/div\u003e\n            \u003c/FlexboardFrame\u003e\n            \u003cFlexboard\n            direction={Position.right}\n            draggable={true}\n            width={400}\n            minWidth={200}\n            maxWidth={600}\n            flexboardStyle={{ backgroundColor: \"#f2f3f4\" }}\n            resizerStyle={{ backgroundColor: \"pink\" }}\n            resizerType={ResizerType.gutterlane}\n            \u003e\n                \u003cdiv\u003eFlexboard Content\u003c/div\u003e\n            \u003c/Flexboard\u003e\n    \u003c/FlexboardProvider\u003e\n```\n\n### Left-Right Sidebar\n\nTo use Left-Right Sidebar `FlexboardFrame` component must be used in between the `Flexboard` left and right components inside `FlexboardProvider`.\n\n```tsx\nimport { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';\n    \u003cFlexboardProvider\u003e\n            \u003cFlexboard\n            direction={Position.left}\n            draggable={true}\n            width={400}\n            minWidth={200}\n            maxWidth={600}\n            flexboardStyle={{ backgroundColor: \"#f2f3f4\" }}\n            resizerStyle={{ backgroundColor: \"pink\" }}\n            resizerType={ResizerType.gutterlane}\n            \u003e\n                \u003cdiv\u003eLeft-Sidebar\u003c/div\u003e\n            \u003c/Flexboard\u003e\n            \u003cFlexboardFrame\u003e\n                \u003cdiv\u003eFrame Content\u003c/div\u003e\n            \u003c/FlexboardFrame\u003e\n             \u003cFlexboard\n            direction={Position.right}\n            draggable={true}\n            width={400}\n            minWidth={200}\n            maxWidth={600}\n            flexboardStyle={{ backgroundColor: \"#f2f3f4\" }}\n            resizerStyle={{ backgroundColor: \"pink\" }}\n            resizerType={ResizerType.gutterlane}\n            \u003e\n                \u003cdiv\u003eRight-Sidebar\u003c/div\u003e\n            \u003c/Flexboard\u003e\n    \u003c/FlexboardProvider\u003e\n```\n\n\u003c!-- API --\u003e\n\n## API\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eComponent\u003c/th\u003e\n            \u003cth\u003eProp\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eDefault\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd rowspan=10\u003eFlexboard\u003c/td\u003e\n            \u003ctd \u003edirection\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003ePosition\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eFlexboard position\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edraggable\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eFlexboard is resizable or not\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ewidth\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eInitial width of flexboard\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e200px\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eminWidth\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eMinimum width of draggable flexboard\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e150\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emaxWidth\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eMaximum width of draggable flexboard\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e300\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eflexboardStyle\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSS\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003ePass custom sidebar styles\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eresizerStyle\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSS\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003ePass custom resizer styles\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eresizerType\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eResizerTypes\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eChoose a resizer type: \u003cul\u003e\u003cli\u003e\u003ccode\u003eline\u003c/code\u003e\u003c/li\u003e\u003cli\u003e\u003ccode\u003eshadowline\u003c/code\u003e\u003c/li\u003e\u003cli\u003e\u003ccode\u003elane\u003c/code\u003e\u003c/li\u003e\u003cli\u003e\u003ccode\u003egutterlane\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eline\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Project Created \u0026 Maintained By\n\n### Divyanshu Shekhar\n\n\u003ca href=\"https://twitter.com/dshekhar17\"\u003e\u003cimg src=\"https://github.com/aritraroy/social-icons/blob/master/twitter-icon.png?raw=true\" width=\"60\"\u003e\u003c/a\u003e \u003ca href=\"https://in.linkedin.com/in/divyanshu-shekhar-a8a04a162\"\u003e\u003cimg src=\"https://github.com/aritraroy/social-icons/blob/master/linkedin-icon.png?raw=true\" width=\"60\"\u003e\u003c/a\u003e \u003ca href=\"https://instagram.com/dshekhar17\"\u003e\u003cimg src=\"https://github.com/aritraroy/social-icons/blob/master/instagram-icon.png?raw=true\" width=\"60\"\u003e\u003c/a\u003e\n\n[![GitHub followers](https://img.shields.io/github/followers/divshekhar.svg?style=social\u0026label=Follow)](https://github.com/divshekhar/)\n\n### Aniket Pathak\n\n\u003ca href=\"https://www.linkedin.com/in/aniket-pathak-8925311b5/\"\u003e\u003cimg src=\"https://github.com/aritraroy/social-icons/blob/master/linkedin-icon.png?raw=true\" width=\"60\"\u003e\u003c/a\u003e \u003ca href=\"https://www.instagram.com/anik3t_pathak/\"\u003e\u003cimg src=\"https://github.com/aritraroy/social-icons/blob/master/instagram-icon.png?raw=true\" width=\"60\"\u003e\u003c/a\u003e\n\n[![GitHub followers](https://img.shields.io/github/followers/aniketpathak028.svg?style=social\u0026label=Follow)](https://github.com/aniketpathak028/)\n\n## Stargazers\n\n[![Stargazers repo roster for @dorbus/flexboard](https://reporoster.com/stars/dark/dorbus/flexboard)](https://github.com/dorbus/flexboard/stargazers)\n\n## Forkers\n\n[![Forkers repo roster for @dorbus/flexboard](https://reporoster.com/forks/dark/dorbus/flexboard)](https://github.com/dorbus/flexboard/network/members)\n\n\u003c!-- License --\u003e\n## Copyright \u0026 License\n\nCode and documentation Copyright (c) [ISC](LICENSE) © 2022 Dorbus.\n","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdorbus%2Fflexboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdorbus%2Fflexboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdorbus%2Fflexboard/lists"}