npmpackage.info

Gathering detailed insights and metrics for react-pro-sidebar

react-pro-sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

1.1.0

1,733

MIT

TypeScript

21.62 kB

5,664,068 2.6

Installations

npm install react-pro-sidebar

Score

82.6

Supply Chain

90.1

Quality

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

3

Total

81

Closed

49

Merged

29

Issues

Open

2

Total

155

Closed

153

Releases

V1.1.0

v1.1.0

Published on 03 Feb 2024

V1.1.0-alpha.2

v1.1.0-alpha.2

Published on 22 Jan 2024

V1.1.0-alpha.1

v1.1.0-alpha.1

Published on 20 May 2023

V1.0.0

v1.0.0

Published on 21 Jan 2023

V1.0.0-beta.3

v1.0.0-beta.3

Published on 20 Jan 2023

V1.0.0-beta.2

v1.0.0-beta.2

Published on 14 Jan 2023

View all 30 releases

Developer

azouaoui-med

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

NPM Version

Statistics

1,733 Stars

313 Commits

414 Forks

15 Watching

8 Branches

7 Contributors

Updated on 28 Nov 2024

Bundle Size

64.41 kB

Minified

21.62 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (97.31%)

HTML (1.49%)

JavaScript (1.15%)

Shell (0.05%)

Total Downloads

Cumulative downloads

Total Downloads

5,664,068

Last day

-12.1%

9,651

Compared to previous day

Last week

-4.1%

55,275

Compared to previous week

Last month

10.4%

232,137

Compared to previous month

Last year

41.9%

2,505,905

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React Pro Sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

Old versions

v0.x

Live Preview

Screenshot

react-pro-sidebar

Installation

yarn

1yarn add react-pro-sidebar

npm

1npm install react-pro-sidebar

Usage

1import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
2
3<Sidebar>
4  <Menu>
5    <SubMenu label="Charts">
6      <MenuItem> Pie charts </MenuItem>
7      <MenuItem> Line charts </MenuItem>
8    </SubMenu>
9    <MenuItem> Documentation </MenuItem>
10    <MenuItem> Calendar </MenuItem>
11  </Menu>
12</Sidebar>;

Using React Router

You can make use of the component prop to integrate React Router link

Example Usage

1import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
2import { Link } from 'react-router-dom';
3
4<Sidebar>
5  <Menu
6    menuItemStyles={{
7      button: {
8        // the active class will be added automatically by react router
9        // so we can use it to style the active menu item
10        [`&.active`]: {
11          backgroundColor: '#13395e',
12          color: '#b6c8d9',
13        },
14      },
15    }}
16  >
17    <MenuItem component={<Link to="/documentation" />}> Documentation</MenuItem>
18    <MenuItem component={<Link to="/calendar" />}> Calendar</MenuItem>
19    <MenuItem component={<Link to="/e-commerce" />}> E-commerce</MenuItem>
20  </Menu>
21</Sidebar>;

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

1<Sidebar
2  rootStyles={{
3    [`.${sidebarClasses.container}`]: {
4      backgroundColor: 'red',
5    },
6  }}
7>
8  // ...
9</Sidebar>

For Menu component, in addition to rootStyles you can also use menuItemStyles prop for customizing all MenuItem & SubMenu components and their children

Type definition

1interface MenuItemStyles {
2  root?: ElementStyles;
3  button?: ElementStyles;
4  label?: ElementStyles;
5  prefix?: ElementStyles;
6  suffix?: ElementStyles;
7  icon?: ElementStyles;
8  subMenuContent?: ElementStyles;
9  SubMenuExpandIcon?: ElementStyles;
10}
11
12type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);

Example usage

1<Sidebar>
2  <Menu
3    menuItemStyles={{
4      button: ({ level, active, disabled }) => {
5        // only apply styles on first level elements of the tree
6        if (level === 0)
7          return {
8            color: disabled ? '#f5d9ff' : '#d359ff',
9            backgroundColor: active ? '#eecef9' : undefined,
10          };
11      },
12    }}
13  >
14    //...
15  </Menu>
16</Sidebar>

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

49 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg
Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.6

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-pro-sidebar

Installations

Score

Pull Requests

3

81

49

29

Issues

2

155

153

Releases

Developer

Developer Guide

CommonJS

No

Statistics

Bundle Size

64.41 kB

21.62 kB

Languages

Total Downloads

5,664,068

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Pro Sidebar

Old versions

Live Preview

Screenshot

Installation

yarn

npm

Usage

Using React Router

Customization

API

License

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10