A fixed sidebar for react apps including support for mobile touch to open/close

Usage no npm install needed!

<script type="module">
  import reactFixedSidebar from '';


React Fixed Side Bar

A simple fixed side bar react component that supports touch gestures on mobile to open/close.




import React from 'react';
import SideBar from 'react-fixed-sidebar';

class App extends React.Component {

    toggleSideBar = event => {
        // use our 'ref' to the sidebar component
        // to open it

    render() {
        return (
                <h1>Hello World!</h1>
                    style={{float: 'right'}}
                    Toggle Sidebar
                <SideBar ref=(sidebar => this.sidebar = sidebar)>
                    <div>more content</div>

Available props:

static propTypes = {
    // the width of the sidebar (px)
    width: PropTypes.number,

    // react children to be rendered inside the sidebar
    children: PropTypes.node,

    // defaults to false. If true, the sidebar will
    // not snap to open/closed when partially dragged
    allowPartial: PropTypes.bool,

    // will be added to the sidebar element for styling
    className: PropTypes.string,

Available methods:


opens the side bar.


closes the side bar.


toggle's the side bar between open/closed.

Start Developing:

The only system dependancies for developing are NodeJS v4 or higher.

To build and run the demo project...

npm install
npm run serve:hot
# server running on http://localhost:8000

The above will start webpack-dev-server. If you want to build to the file system just run npm run build which will build the demo project into dist/

To build the lib directory, i.e. the component ready for distribution...

npm run build:lib
# will build ./lib/SideBar.js


MIT License.

See the LICENSE file.