JSPM – react-responsive-sidebar-menu@1.1.0

Package Exports

react-responsive-sidebar-menu
react-responsive-sidebar-menu/es/index.js
react-responsive-sidebar-menu/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-responsive-sidebar-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

react-responsive-sidebar-menu