No Plugins; Monolithic

    react-sidebar-ui

    1.2.1 • Public • Published

    react-sidebar-ui

    ⚛️ Sidebar component for React projects with customizable design

    NPM NPM Downloads Buy me a coffee
    React Sidebar UI Black React Sidebar UI Light

    Install

    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
    import React from 'react'
    import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'
     
    const App = () => {
      return (
        <div>
          <Sidebar bgColor='black' isCollapsed={false}>
            <Logo
              image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'
              imageName='react logo'/>
            <LogoText>React Sidebar UI</LogoText>
            <DropdownItem
              values={['First', 'Second', 'Third']}
              bgColor={'black'}>
              Menu
            </DropdownItem>
     
            <Item bgColor='black'>
              <Icon><i className="fas fa-home"/></Icon>
              Home
            </Item>
            <Item bgColor='black'>
              <Icon><i className="fas fa-info"/></Icon>
              About
            </Item>
            <Item bgColor='black'>
              <Icon><i className="fas fa-sitemap"/></Icon>
              My Website
            </Item>
            <Item bgColor='black'>
              <Icon><i className="far fa-address-book"/></Icon>
              Contacts
            </Item>
            <Item bgColor='black'>
              <Icon><i className="fas fa-rss-square"/></Icon>
              Blog
            </Item>
            <InputItem type='text' placeholder={'Search...'}/>
          </Sidebar>
        </div>
      )
    };

    Props

    Common props you may want to specify include:

    Sidebar

    • 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

    DropdownItem

    • 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

    Item

    • 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

    Logo

    • 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

    InputItem

    • 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

    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

    Install

    npm i react-sidebar-ui

    DownloadsWeekly Downloads

    285

    Version

    1.2.1

    License

    yes

    Unpacked Size

    35.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • svetloslav