React Fixed Side Bar

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

Demo: https://place1.github.io/react-fixed-sidebar/

Usage:

Example:

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
        this.sidebar.toggle()
    }

    render() {
        return (
            <div>
                <h1>Hello World!</h1>
                <button
                    onClick={this.toggleSideBar}
                    style={{float: 'right'}}
                >
                    Toggle Sidebar
                </button>
                <SideBar ref=(sidebar => this.sidebar = sidebar)>
                    <div>content</div>
                    <div>more content</div>
                </SideBar>
            </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:

SideBar#open

opens the side bar.

SideBar#close

closes the side bar.

SideBar#toggle

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

License:

MIT License.

See the LICENSE file.