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:
;; Component { // use our 'ref' to the sidebar component // to open it thissidebar } { return <div> <h1>Hello World!</h1> <button onClick=thistoggleSideBar style=float: 'right' > Toggle Sidebar </button> <SideBar ref= thissidebar = sidebar> <div>content</div> <div>more content</div> </SideBar> </div> ; }
Available props:
static propTypes = // the width of the sidebar (px) width: PropTypesnumber // react children to be rendered inside the sidebar children: PropTypesnode // defaults to false. If true, the sidebar will // not snap to open/closed when partially dragged allowPartial: PropTypesbool // will be added to the sidebar element for styling className: PropTypesstring
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.