Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SmashTapsOS/react-offcanvas-component
Off-canvas Sidebar for React
https://github.com/SmashTapsOS/react-offcanvas-component
react-animated-sidebar react-offcanvas react-offcanvas-component react-offcanvas-menu react-sidebar react-sidebar-menu
Last synced: 3 months ago
JSON representation
Off-canvas Sidebar for React
- Host: GitHub
- URL: https://github.com/SmashTapsOS/react-offcanvas-component
- Owner: SmashTapsOS
- License: mit
- Created: 2019-08-17T03:50:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:28:13.000Z (almost 2 years ago)
- Last Synced: 2024-07-28T14:22:44.082Z (3 months ago)
- Topics: react-animated-sidebar, react-offcanvas, react-offcanvas-component, react-offcanvas-menu, react-sidebar, react-sidebar-menu
- Language: JavaScript
- Homepage: https://samabeywickrama.github.io/roc-examples/
- Size: 9.32 MB
- Stars: 10
- Watchers: 3
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/samAbeywickrama/react-offcanvas-component)
[](https://github.com/prettier/prettier)
[](http://commitizen.github.io/cz-cli/)
# React Offcanvas Component
Create Off-canvas Sidebars with React and Popmotion's pose
## [**Demo**](https://samabeywickrama.github.io/roc-examples/)
## Installation
This npm module utilizes `react-pose` for animations.
#### yarn
`yarn add react-pose react-offcanvas-component`
#### npm
`npm i -S react-pose react-offcanvas-component`
## Developments
This repo uses `Commitizen` for git commit conventions.
Run `yarn commit` or `npm run commit`
You'll be prompted to fill in any required fields and your commit messages will be formatted according to the standards
## Basic usage
Please visit this [Repo](https://github.com/samAbeywickrama/roc-examples) for examples.
```js
import ReactOffcanvasComponent from "react-offcanvas-component";
import "./Basic.css";
const { Menu, DropdownMenu, CloseButton } = ReactOffcanvasComponent;
const openAnimation = {
x: 0,
transition: {
duration: 200
}
};
x
ROC
Home
Another Menu Item
Dropdown
Abc
Abc
Abc
Is n't it awesome
;
```
```css
.wrapper {
width: 400px;
background: #fff;
padding: 20px;
}
.menu-item {
margin-bottom: 20px;
}
.dropdown {
cursor: pointer;
margin-bottom: 20px;
}
.dropdown-item {
padding: 10px;
margin-top: 20px;
background: #e2e2e2;
}
.logo {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #e2e2e2;
width: 200px;
}
```
## API
#### ReactOffcanvasComponent
| Prop | Type | Default | Required | Description |
| ---------------- | --------- | --------------------------------------------- | -------- | ----------------------------------------------------------------------------- |
| open | `Boolean` | `false` | yes | Setting values as `true` will Reveal Sidebar and `false` will Hide Sidebar |
| className | `String` | no | no | Override the styles applied to the component with css |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| openAnimation | `Object` | [See Default Animations](#default-animations) | no | Override the default open animation |
| closeAnimation | `Object` | [See Default Animations](#default-animations) | no | Override the default close animation |
| overlay | `Boolean` | false | no | Show / Hide background overlay |
| overlayClassName | `String` | no | no | Override the default styles applied to the Overlay component with css classes |
#### AnimatedPanel
| Prop | Type | Default | Required | Description |
| -------------- | -------- | --------------------------------------------- | -------- | --------------------------------------------------------------- |
| className | `String` | no | no | Override the styles applied to the component with css |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| openAnimation | `Object` | [See Default Animations](#default-animations) | no | Override the default open animation |
| closeAnimation | `Object` | [See Default Animations](#default-animations) | no | Override the default close animation |
#### CloseButton
| Prop | Type | Default | Required | Description |
| --------- | ---------- | ------- | -------- | --------------------------------------------------------------- |
| onClick | `Function` | no | no | `function(event: object) => void` |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| className | `String` | no | no | Override the styles applied to the component with css |
#### DropdownMenu
| Prop | Type | Default | Required | Description |
| --------- | -------- | ------- | -------- | --------------------------------------------------------------- |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| className | `String` | no | no | Override the styles applied to the component with css |
#### DropdownMenu
| Prop | Type | Default | Required | Description |
| --------- | -------- | ------- | -------- | ----------------------------------------------------- |
| className | `String` | no | no | Override the styles applied to the component with css |
#### MenuItem
| Prop | Type | Default | Required | Description |
| --------------------- | ---------- | ------- | -------- | ----------------------------------------------------------------- |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| className | `String` | no | no | Override the styles applied to the component with css |
| onClick | `Function` | no | no | `function(event: object) => void` |
| dropdownIconClassName | `String` | no | no | Override the styles applied to the dropdown menu icon with css |
| hasDropdown | `Boolean` | no | no | If the MenuItem contains a dropdown menu set this value to `true` |
### Default Animations
I have used [react-pose](https://popmotion.io/pose/) to create the animations. A tons of customization possible via pose api.
#### ReactOffcanvasComponent
**Open**
```js
{
x: "-100px",
transition: {
ease: [0.175, 0.885, 0.32, 1.275],
duration: 300
},
delayChildren: 150,
staggerChildren: 100
}
```
**Close**
```js
{
x: "-100%",
transition: {
duration: 100
},
afterChildren: true
}
```
#### AnimatedPanel
**Open**
```js
{
x: "0%",
transition: {
ease: [0.175, 0.885, 0.32, 1.275],
duration: 300
},
delayChildren: 300,
staggerChildren: 100
}
```
**Close**
```js
{
x: "-100%",
transition: {
duration: 100
},
afterChildren: true
}
```
#### Todo:
- Add tests and coverage reports