Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azouaoui-med/react-pro-sidebar
React Pro Sidebar provides a set of components for creating high level and customizable side navigation
https://github.com/azouaoui-med/react-pro-sidebar
dropdown-menus menu menus npm npm-package react react-component reactjs sidebar submenu submenus tree-structure
Last synced: 7 days ago
JSON representation
React Pro Sidebar provides a set of components for creating high level and customizable side navigation
- Host: GitHub
- URL: https://github.com/azouaoui-med/react-pro-sidebar
- Owner: azouaoui-med
- License: mit
- Created: 2020-05-06T14:24:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-15T17:55:41.000Z (3 months ago)
- Last Synced: 2024-10-29T15:04:08.119Z (3 months ago)
- Topics: dropdown-menus, menu, menus, npm, npm-package, react, react-component, reactjs, sidebar, submenu, submenus, tree-structure
- Language: TypeScript
- Homepage: https://azouaoui-med.github.io/react-pro-sidebar/
- Size: 4.38 MB
- Stars: 1,721
- Watchers: 15
- Forks: 412
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [React Pro Sidebar](https://www.npmjs.com/package/react-pro-sidebar)
[![npm][version]][npm-url]
[![License][license]][npm-url]
[![Peer][peer]][npm-url]
[![Download][download]][npm-url]
[![Stars][stars]][github-url]
[version]: https://img.shields.io/npm/v/react-pro-sidebar.svg?style=flat-square
[license]: https://img.shields.io/github/license/azouaoui-med/react-pro-sidebar?style=flat-square
[peer]: https://img.shields.io/npm/dependency-version/react-pro-sidebar/peer/react?style=flat-square
[download]: https://img.shields.io/npm/dt/react-pro-sidebar?style=flat-square
[stars]: https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social
[npm-url]: https://www.npmjs.com/package/react-pro-sidebar
[github-url]: https://github.com/azouaoui-med/react-pro-sidebar
React Pro Sidebar provides a set of components for creating high level and customizable side navigation
## Old versions
- [v0.x](https://github.com/azouaoui-med/react-pro-sidebar/tree/v0.x)
## Live Preview
- [Demo](https://azouaoui-med.github.io/react-pro-sidebar/iframe.html?id=playground--playground&args=&viewMode=story)
- [Storybook](https://azouaoui-med.github.io/react-pro-sidebar/?path=/docs/sidebar--basic)
## Screenshot
## Installation
### yarn
```bash
yarn add react-pro-sidebar
```
### npm
```bash
npm install react-pro-sidebar
```
## Usage
```jsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
Pie charts
Line charts
Documentation
Calendar
;
```
## Using React Router
You can make use of the `component` prop to integrate [React Router](https://reactrouter.com/en/main) link
**Example Usage**
```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { Link } from 'react-router-dom';
}> Documentation
}> Calendar
}> E-commerce
;
```
## Customization
We provide for each component `rootStyles` prop that can be used to customize the styles
its recommended using utility classes (`sidebarClasses`, `menuClasses`) for selecting target child nodes
**Example usage**
```jsx
// ...
```
For `Menu` component, in addition to `rootStyles` you can also use `menuItemStyles` prop for customizing all `MenuItem` & `SubMenu` components and their children
**Type definition**
```jsx
interface MenuItemStyles {
root?: ElementStyles;
button?: ElementStyles;
label?: ElementStyles;
prefix?: ElementStyles;
suffix?: ElementStyles;
icon?: ElementStyles;
subMenuContent?: ElementStyles;
SubMenuExpandIcon?: ElementStyles;
}
type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);
```
**Example usage**
```jsx
{
// only apply styles on first level elements of the tree
if (level === 0)
return {
color: disabled ? '#f5d9ff' : '#d359ff',
backgroundColor: active ? '#eecef9' : undefined,
};
},
}}
>
//...
```
## API
Component
Prop
Type
Description
Default
Sidebar
defaultCollapsed
boolean
Initial collapsed status
false
collapsed
boolean
Sidebar collapsed state
false
toggled
boolean
Sidebar toggled state
false
width
number | string
Width of the sidebar
270px
collapsedWidth
number | string
Width of the sidebar on collapsed state
80px
backgroundColor
string
Set background color for sidebar
rgb(249, 249, 249, 0.7)
image
string
Url of the image to use in the sidebar background, need to apply transparency to background color
-
breakPoint
xs | sm | md | lg | xl | xxl | all
Set when the sidebar should trigger responsiveness behavior
-
customBreakPoint
string
Set custom breakpoint value, this will override breakPoint prop
-
transitionDuration
number
Duration for the transition in milliseconds to be used in collapse and toggle behavior
300
rtl
boolean
RTL direction
false
rootStyles
CSSObject
Apply styles to sidebar element
-
onBackdropClick
() => void
Callback function to be called when backdrop is clicked
-
Menu
closeOnClick
boolean
If true and sidebar is in collapsed state, submenu popper will automatically close on MenuItem click
false
menuItemStyles
MenuItemStyles
Apply styles to MenuItem and SubMenu components and their children
-
renderExpandIcon
(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode
Render method for customizing submenu expand icon
-
transitionDuration
number
Transition duration in milliseconds to use when sliding submenu content
300
rootStyles
CSSObject
Apply styles from Menu root element
-
MenuItem
icon
ReactNode
Icon for the menu item
-
active
boolean
If true, the component is active
false
disabled
boolean
If true, the component is disabled
-
prefix
ReactNode
Add a prefix to the menuItem
-
suffix
ReactNode
Add a suffix to the menuItem
-
component
string | ReactElement
A component used for menu button node, can be string (ex: 'div') or a component
-
rootStyles
CSSObject
Apply styles to MenuItem element
-
SubMenu
label
string | ReactNode
Label for the submenu
-
icon
ReactNode
Icon for submenu
-
defaultOpen
boolean
Set if the submenu is open by default
false
open
boolean
Set open value if you want to control the state
-
active
boolean
If true, the component is active
false
disabled
boolean
If true, the component is disabled
-
prefix
ReactNode
Add a prefix to the submenu
-
suffix
ReactNode
Add a suffix to the submenu
-
onOpenChange
(open: boolean) => void
Callback function called when submenu state changes
-
component
string | React.ReactElement
A component used for menu button node, can be string (ex: 'div') or a component
-
rootStyles
CSSObject
Apply styles to SubMenu element
-
## License
MIT © [Mohamed Azouaoui](https://azouaoui.netlify.app)