A simple fixed side bar react component that supports touch gestures on mobile to open/close.
Demo: https://place1.github.io/react-fixed-sidebar/
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>
);
}
}
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,
}
opens the side bar.
closes the side bar.
toggle's the side bar between open/closed.
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.