reactrix-sidebar v0.0.4

React Sidebar

Flexible React Sidebar Component

Install

npm install --save reactrix-sidebar
yarn add reactrix-sidebar

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 'reactrix-sidebar'
import 'reactrix-sidebar/index.css'

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>
    )
  }
}

Gotcha

⚠️ The component uses FontAwesome icons by default. If you're not passing in custom icons, make sure to include the link below in the head tag of your index.html file.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

Features

• Only two peer depencies (react/prop-types)
• Large selection of smooth transitions
• Easy to use BEM class hooks

Examples

• Demo - https://alexcasche.github.io/reactrix-sidebar/
• Sandbox - https://codesandbox.io/s/jlzno327x9

Props

Custom Icons

Set the icons prop equal to an array consisting of two components.

function openButton {
  return <i className="fas fa-times" />
}
function closeButton {
  return <i className="fas fa-bars" />
}
...
  const options = {
    icons: [ openButton, closeButton ]
  }
...
  <Sidebar {...options} />
...

Classes

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

2. Setup project & start rollup watch

npm install && npm start
yarn install && yarn add

3. Setup react app & start dev server

cd example
npm install && npm start
yarn install && yarn start

Shoutout

Big thanks to Travis Fischer for the awesome create-react-library 🙌

License

MIT © alexcasche