Material-UI responsive Drawer

Table of Contents

• Description
• Installation
• Usage
  • Preparation -Material-UI -Redux responsive -Reducers
  • Examples
• Contributing

Description

Material-UI responsive Drawer is a React-Redux component that uses Material-UI to create a responsive Drawer.

You can try it out the DEMO.

Installation

This project can be installed as npm module using following command:

npm i -S material-ui-responsive-drawer

Usage

Preparation

Material-UI

For this project components to work in your application after the npm installation you have to be sure that everything is correctly setup for Material-UI to work. You can find more about that here.

Redux responsive

We also need to add the responsiveStoreEnhancer from redux-responsive into our store:

import {responsiveStoreEnhancer} from 'redux-responsive';
const store = createStore(reducers, responsiveStoreEnhancer);

You can find more about the redux-responsive project here.

Reducers

No matter where you store your reducers the ResponsiveDrawer needs access to a specific reducer and its state. For that we add to our reducers index.js file where we combine all our reducers the following two reducers:

import {responsiveStateReducer} from 'redux-responsive';
import {combineReducers} from 'redux';
import {responsiveDrawer} from 'material-ui-responsive-drawer';

const reducers = combineReducers({
  browser: responsiveStateReducer,
  responsiveDrawer: responsiveDrawer
})

export default reducers;

That are the point we have to do before using this module in our application.

Examples

The module contains of three main parts:

• ResponsiveDrawer the responsive Drawer
• BodyContainer the responsive body that is adjusting its position according to the drawer
• ResponsiveAppBar the responsive AppBar that works with the ResponsiveDrawer together

All can be imported like this:

import {
  ResponsiveDrawer,
  BodyContainer,
  ResponsiveAppBar
} from 'material-ui-responsive-drawer'

All of them are just containers in witch you can put all your other application components:

<div>
    <ResponsiveDrawer>
      <div>
        //all your components you want to have in the drawer part
      </div>
    </ResponsiveDrawer>
    <BodyContainer>
      <ResponsiveAppBar
          title={'Responsive Material-UI Drawer DEMO'}
          iconElementRight={<FlatButton label="Demo" />}
        />
      <div>
        //all your components you want to have in the body part
      </div>
    </BodyContainer>
</div>

The ResponsiveDrawer has the same properties as the Material-UI Drawer. The ResponsiveAppBar has the same properties as the Material-UI AppBar.

There are some properties that should always be the same in this three components:

• width - if the width of the drawer is set to a specific value the width of the BodyContainer should be set to the same to avoid overlapping. Default is 256.
• openSecondary - defines on witch side the Drawer will open so the BodyContainer should also have the same value for this property. Default is false.
• breakPoint - defines on witch size of the window the Drawer will be closed (small windows) or open and docked (large windows). Default is 'medium'. You can add custom break points to the redux-responsive implementation and change the breakPoint for the ResponsiveDrawer. More about that you can find here

All this properties are optional.

To use the actions for changing the drawer properties we will need some more code. For example we can change the responsive state of the drawer by calling the action setResponsive that needs a boolean as parameter witch defines if the drawer is responsive or not.

The actions available in this module are: toggleDrawerOpen, toggleDrawerDock, setDrawerOpen(open), setResponsive(responsive).

We can import them from the module like this:

import {
  ResponsiveDrawer,
  BodyContainer,
  ResponsiveAppBar,
  toggleDrawerOpen,
  toggleDrawerDock,
  setResponsive
} from 'material-ui-responsive-drawer'

An complete example with all the actions called can be found in the App.js of the demo part of this project.

Contributing

Every help no matter if it is a critique, suggestion or pull request is welcome :)