Sidebar component for React projects with customizable design
npm install react-sidebar-uibash
npm install react-sidebar-ui
or
yarn add react-sidebar-ui
`
Usage
1. Import https://unpkg.com/react-sidebar-ui@1.2.0/dist/index.css into your index.html file
2. In order to use icons, you should import Font-Awesome
3. Start using the component
`jsx
import React from 'react'
import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'
const App = () => {
return (
imageName='react logo'/>
React Sidebar UI
bgColor={'black'}>
Menu
-
Home
-
About
-
My Website
-
Contacts
-
Blog
)
};
`
Props
Common props you may want to specify include:
$3
- bgColor - change the color of the sidebar, it can be black, light, blue, purple, aqua, peach
- isCollapsed - add start position of the sidebar if it will be collapsed or not
- classes - add your custom classes if you want to add custom style to the component
- position - add where the sidebar will be positioned on the screen, it can be left and right. If you don't specify it will be left.
$3
- bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
- values - items that will be displayed
- classes - add your custom classes if you want to add custom style to the component
$3
- bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
- classes - add your custom classes if you want to add custom style to the component
$3
- image - url to the image
- imageText - alt tag of the image
- classes - add your custom classes if you want to add custom style to the component
$3
- type - type of the input field
- placeholder - placeholder of the input field
- classes - add your custom classes if you want to add custom style to the component
$3
- classes` - you should add font-awesome class here add your custom classes if you want to add custom style to the component