react-admin-drawer v1.0.2

react-admin-drawer

Installation

To install the package and add it to your package.json, invoke:

 npm install --save react-admin-drawer

Usage

1. Create your links. You can use nested links (take care nesting links, the UI could look bad if you use high depth). The only required key is title.

import { Link } from 'react-admin-drawer'

export const links: Link[] = [
  { title: 'Super Store', icon: Home, onClick: (h): void => h.push('/admin') },
  {
    title: 'Categories',
    icon: ViewList,
    links: [
      { title: 'Jeans', onClick: (h): void => h.push('/admin/categories/jeans') },
      { title: 'T-Shirts', onClick: (h): void => h.push('/admin/categories/shirts') }
    ]
  },
  {
    title: 'Shops',
    icon: Business,
    links: [
      { title: 'New York', onClick: (h): void => h.push('/admin/shops/newyork') },
      { title: 'Sidney', onClick: (h): void => h.push('/admin/shops/sidney') },
      {
        title: 'Japan',
        links: [
          { title: 'Tokyo', onClick: (h): void => h.push('/admin/shops/tokyo') },
          { title: 'Yokohama', onClick: (h): void => h.push('/admin/shops/yokohama') }
        ]
      }
    ]
  }
]

2. Creating your actions. You can add some main actions to the navbar.

import { Action } from 'react-admin-drawer'

export const actions: Action[] = [
  { text: 'Log Out', onClick: (h): void => h.push('/') }
]

As you can see, onClick event has h parameter which is of type History. This allows you to navigate to whatever you want using the router.

3. Import your the Provider and the route components

import { AdminProvider, AdminRoute } from 'react-admin-drawer'

You should be noted that this component requires a router, for that import, for example:

import { BrowserRouter, Switch } from 'react-router-dom'

4. Register your Provider

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <ThemeProvider theme={ theme }>
        <AdminProvider logo={ logo } links={ links } actions={ actions }>
          [ ... ]
        </AdminProvider>
      </ThemeProvider>
    </BrowserRouter>
  )
}

5. Add your AdminRoutes You can combine in the same Switch normal Routes and AdminRoutes. Both receives the same kind of parameters but AdminRoute takes advantages of AdminProvider and wrap your component with the navbar and the drawer menu.

[ ... ]
<Switch>
  <Route exact path='/' component={ Home } />
  <AdminRoute exact path='/admin' component={ Admin } />
  <AdminRoute path='/admin/categories/:category' component={ Categories } />
  <AdminRoute path='/admin/shops/:store' component={ Stores } />
</Switch>
[ ... ]

AdminProvider