react-styled-sidebar
Github pages component for React built with styled-components < 💅>.
Install
npm install --save react-styled-sidebaryarn add react-styled-sidebar
Usage
- Import the module along with the base styles
- Pass desired props to component using spread operator
import React Component from 'react';import Sidebar from 'react-styled-sidebar'; { const options = side: "left" effect: "slide-out" speed: 250 timing: 'ease-in-out' return <Sidebar > <div>Menu Goes Here</div> <div>Page Goes Here</div> </Sidebar> }
Features
- Only one dependency (styled-components)
- Only two peer depencies (react/prop-types)
- Large selection of smooth transitions
- Easy to use BEM class hooks
Examples
Props
Prop | Type | Default | Description: Options |
---|---|---|---|
side |
string | left |
Menu location: left right |
effect |
string | slide |
Transition effect: slide push fall reveal diverge uncover shrink grow press |
speed |
number | 500 |
Transition speed (milliseconds) |
timing |
string | ease |
Transition timing function: |
overlay |
boolean | true |
Display overlay: true false |
icons |
array | [ close, open ] |
Custom icons: [ component, component ] |
Custom Icons
Set the icons prop equal to an array consisting of two components.
import OpenIcon CloseIcon from './CustomIcons'... const options = icons: OpenIcon CloseIcon ... <Sidebar />...
Classes
Class | Description |
---|---|
.sidebar |
Outer component wrapper |
.sidebar__container |
Inner component wrapper |
.sidebar__menu |
Outer menu wrapper |
.sidebar__page |
Page content wrapper |
.sidebar__overlay |
Page overlay |
.sidebar__btn-open |
Open menu button |
.sidebar__btn-close |
Close menu button |
Development
Follow these steps to setup a local development environment. Use yarn or npm - not both.
- Clone the repo from Github
git clone https://github.com/alexcasche/react-styled-sidebar
- Setup project & start rollup watch
npm install && npm startyarn install && yarn add
- Setup react app & start dev server
cd examplenpm install && npm startyarn install && yarn start
Shoutouts
- Inspiration: react-burger-menu 😍
- Setup: create-react-library 🙌
License
MIT © alexcasche