react-sidebar-ui
⚛️ Sidebar component for React projects with customizable design
Install
npm install react-sidebar-uioryarn add react-sidebar-ui
Usage
- Import
https://unpkg.com/react-sidebar-ui@1.2.0/dist/index.css
into your index.html file - In order to use icons, you should import Font-Awesome
- Start using the component
import React from 'react'import Sidebar InputItem DropdownItem Icon Item Logo LogoText from 'react-sidebar-ui' const App = return <div> <Sidebar ='black' => <Logo ='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif' ='react logo'/> <LogoText>React Sidebar UI</LogoText> <DropdownItem = => Menu </DropdownItem> <Item ='black'> <Icon><i ="fas fa-home"/></Icon> Home </Item> <Item ='black'> <Icon><i ="fas fa-info"/></Icon> About </Item> <Item ='black'> <Icon><i ="fas fa-sitemap"/></Icon> My Website </Item> <Item ='black'> <Icon><i ="far fa-address-book"/></Icon> Contacts </Item> <Item ='black'> <Icon><i ="fas fa-rss-square"/></Icon> Blog </Item> <InputItem ='text' =/> </Sidebar> </div> ;
Props
Common props you may want to specify include:
Sidebar
bgColor
- change the color of the sidebar it can beblack
,light
,blue
,purple
,aqua
,peach
isCollapsed
- add start position of the sidebar if it will be collapsed or notclasses
- add your custom classes if you want to add custom style to the component
DropdownItem
bgColor
- change the color of the sidebar it can beblack
,light
,blue
,purple
,aqua
,peach
values
- items that will be displayedclasses
- add your custom classes if you want to add custom style to the component
Item
bgColor
- change the color of the sidebar it can beblack
,light
,blue
,purple
,aqua
,peach
classes
- add your custom classes if you want to add custom style to the component
Logo
image
- url to the imageimageText
- alt tag of the imageclasses
- add your custom classes if you want to add custom style to the component
InputItem
type
- type of the input fieldplaceholder
- placeholder of the input fieldclasses
- add your custom classes if you want to add custom style to the component
Icon
classes
- you should add font-awesome class here add your custom classes if you want to add custom style to the component
Customization
If you want to change the style of a component, you can do it by adding your own classes to the component.
Contribute
Contributions are always welcome! Please read the contribution guidelines first.
⭐ If you liked the component, please consider giving me a star. Thank you!
License
Copyright © Svetloslav Novoselski