0.0.1 • Published 6 years ago
react-sidebar-styled v0.0.1
React Sidebar
Styled off-canvas sidebar component for React with a variety of CSS transitions.
Install
npm install --save react-sidebar-styled
yarn add reactrix-sidebar-styled
Usage
- Import the module along with the base styles
- Pass desired props to component using spread operator
import React, { Component } from 'react'
import ReactSidebar from 'react-sidebar-styled'
class ReactSidebar extends Component {
render () {
const options = {
side: "left",
effect: "slide-out",
speed: 250,
timing: 'ease-in-out'
}
return (
<Sidebar {...options}>
<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
- Demo - https://alexcasche.github.io/react-sidebar-styled/
- Sandbox - https://codesandbox.io/s/jlzno327x9
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 {...options} />
...
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. 1. Clone the repo from Github
git clone https://github.com/alexcasche/react-sidebar-styled
- Setup project & start rollup watch
npm install && npm start
yarn install && yarn add
- Setup react app & start dev server
cd example
npm install && npm start
yarn install && yarn start
Shoutouts
- Inspiration: react-burger-menu 😍
- Setup: create-react-library 🙌
License
MIT © alexcasche
0.0.1
6 years ago