@team-by-team/react-drawer
v1.0.1
Published
## Installation
Downloads
3
Readme
@team-by-team/react-drawer
Installation
# npm
npm i @team-by-team/react-drawer
# yarn
yarn add @team-by-team/react-drawer
# pnpm
pnpm add @team-by-team/react-drawer
# bun
bun add @team-by-team/react-drawer
Basic usage
() => {
const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => {
setIsOpen(() => true);
};
const handleClose = () => {
setIsOpen(() => false);
};
return (
<>
<button onClick={handleOpen}>Open Drawer</button>
<Drawer isOpen={isOpen} onClose={handleClose}>
<h2>Drawer</h2>
</Drawer>
</>
);
};
Placement
() => {
const [isOpen, setIsOpen] = useState(false);
const placement = 'top'; // 'top' | 'right' | 'bottom' | 'left'
const handleOpen = () => {
setIsOpen(() => true);
};
const handleClose = () => {
setIsOpen(() => false);
};
return (
<>
<button onClick={handleOpen}>Open Drawer</button>
<Drawer isOpen={isOpen} onClose={handleClose}>
<h2>Drawer</h2>
</Drawer>
</>
);
};
Size
() => {
const [isOpen, setIsOpen] = useState(false);
const size = 'large'; // 'default' | 'large'
const handleClose = () => {
setIsOpen(() => false);
};
return (
<Drawer isOpen={isOpen} onClose={handleClose} size={size}>
<h2>Drawer</h2>
</Drawer>
);
};
Customize transition duration
() => {
const [isOpen, setIsOpen] = useState(false);
const transitionDurationMS = 500; // Customized duration
const handleClose = () => {
setIsOpen(() => false);
};
return (
<Drawer
isOpen={isOpen}
onClose={handleClose}
transitionDurationMS={transitionDurationMS}
>
<h2>Drawer</h2>
</Drawer>
);
};
Props
children
- Components to be rendered inside the Drawer (Header, content, close button, etc.)
- Type :
React.ReactNode
isOpen
- Indicates whether the Drawer is visible on the screen.
- Type :
boolean
- default:
false
onClose
- Function to be executed when the Drawer is closed.
- Type :
() => void
placement
(optional)
- Specifies the position where the Drawer will appear.
- Type :
'top' | 'right' | 'bottom' | 'left'
- Default :
'right'
size
(optional)
- Size of the Drawer.
- Type :
'default' | 'large'
- Default :
'default'
width
(optional)
- Width of the Drawer.
- Type :
React.CSSProperties['width']
height
(optional)
- Height of the Drawer.
- Type :
React.CSSProperties['height']
transitionDurationMS
(optional)
- Duration of the animation when the Drawer opens and closes.
- Type :
number
- Default :
300
zIndex
(optional)
- Value for the z-index property of the Drawer.
- Type :
number
- Default :
1000
css
(optional)
- Style object containing additional CSS properties to be applied.
- Type :
CSSInterpolation