react-responsive-sidebar-menu

1.1.0 • Public • Published

react-responsive-sidebar-menu

Travis npm package Coveralls

Required

  • react-router-dom@^6.0.2

Installation

# npm
npm i react-responsive-sidebar-menu --save
# yarn
yarn add react-responsive-sidebar-menu

Usage

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";
export default class App extends Component {
  menuItems = [
    {
      path: "/",
      text: "Dashboard",
      tooltip: "Dashboard",
      icon: "bx bx-grid-alt",
    },
    {
      path: "/users",
      text: "Users",
      tooltip: "Users",
      icon: "bx bx-user",
    },
    {
      path: "/users",
      text: "Messages",
      tooltip: "Messages",
      icon: "bx bx-chat",
    },
    {
      path: "/users",
      text: "Settings",
      tooltip: "Settings",
      icon: "bx bx-cog",
    },
  ];
  options = {
    title: "React RSB",
    icon: "bx bxl-react icon",
    logo: "https://lucassenarj.github.io/favicon.ico",
  }
  user={
    name: "Lucas Sena",
    avatar: "https://lucassenarj.github.io/images/author.jpg",
    status: "Frontend developer",
    onLogout: () => console.log("logout"),
  }
  render() {
    return (
      <ResponsiveSidebar
        menuItems={this.menuItems}
        options={this.options}
        user={this.user}
      />
    );
  }
}

Props

Prop Description
menuItems An array of objects which acts as the source of data for the menu. This prop is required
menuItems.path Path when users will be redirected when clicked on a menu item. This prop is required
menuItems.text Text which act as name or title for menu items. This prop is required
menuItems.tooltip Text which act as tooltip when sidebar is closed for menu items. This prop is required
menuItems.icon Boxicon class name. This prop is required
options Object which acts as source for project settings. This prop is required
options.title Project or company title. This prop is required
options.icon Boxicon path for company or project icon
options.logo Image path company or project logo
user Object which acts as source for user. This prop is required
user.name User name. This prop is required
user.avatar User picture, image, or avatar. This prop is required
user.status User subtitle or user role. This prop is required
user.onLogout A function which acts as a callback when the logout button is click. This prop is required

Built With

  • React - A JavaScript library for building user interfaces
  • React-Router-Dom - React Router DOM enables you to implement dynamic routing in a web app.
  • BoxIcons - Free collection of carefully crafted open source icons

License

MIT Licensed. Copyright (c) Lucas Sena 2021.

Package Sidebar

Install

npm i react-responsive-sidebar-menu

Weekly Downloads

6

Version

1.1.0

License

MIT

Unpacked Size

190 kB

Total Files

21

Last publish

Collaborators

  • lucassenarj