@jahlgren/react-drawer
v1.0.6
Published
Simple and easy to use drawer (sidebar) component for React.js.
Downloads
16
Maintainers
Readme
React Drawer is an easy to use drawer component for React.js.
Install
npm install @jahlgren/react-drawer
Usage
import React, { useState } from 'react';
import Drawer from '@jahlgren/react-drawer';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Drawer open={isOpen} onClose={() => setIsOpen(false)} >
Content...
</Drawer>
<button onClick={() => setIsOpen(true)}>Open</button>
</>
);
}
export default App;
And import style manually:
import '@jahlgren/react-drawer/dist/index.css';
API
| props | type | default | description | |------------|----------------|-----------|----------------| | open | boolean | - | (required), open or close drawer | | children | any | undefined | drawer content | | width | string|number | 300 | width of the drawer | | transitionDuration | number | 180 | transition duration in milliseconds | | maskClassName | string | undefined | mask css classes | | className | string | undefined | drawer css classes | | onClose | () => void | undefined | close click function |