React Drawer is an animated Drawer component which is designed for react app.
# If you use npm:
npm i @atul15r/react-drawer
# If you use yarn:
yarn add @atul15r/react-drawer
ES6 Usage
import { Drawer } from '@atul15r/react-drawer';
Commonjs Usage
var Drawer = require('@atul15r/react-drawer');
import React, {useState} from 'react';
import { Drawer } from '@atul15r/react-drawer';
const App = () => {
const [show, setShow]=useState(false)
const onToggle=()=>setShow(!show)
return (
<>
<button onClick={onToggle}>Show Drawer</button>
<Drawer
show={show}
onClose={onToggle}
>
Hello World
</Drawer>
</button>
);
};
export default App;
import React, {useState} from 'react';
import { Drawer } from '@atul15r/react-drawer';
const App = () => {
const [show, setShow]=useState(false)
const onToggle=()=>setShow(!show)
return (
<>
<button onClick={onToggle}>Show Drawer</button>
<Drawer
show={show}
onClose={onToggle}
direction="right"
>
Hello World
</Drawer>
</button>
);
};
export default App;
name | type | required | default | description |
---|---|---|---|---|
show | boolean |
true | false | false - drawer close true - drawer open |
onClose | func |
false | pass a func to toggle the drawer view | |
drawerStyle | object |
false | drawerStyle= {{ background:#6b6b6b, }} |
|
drawerClassName | string |
false | add any custom class you want | |
width | string | number |
false | 350 | width will be effective only if the drawer position is left or right |
height | string | number |
false | 350 | height will be effective only if the drawer position is top or bottom |
direction | left | right | top | bottom |
false | left | change drawer position eg: direction="right" |
backdrp | string |
false | backdrop color |