🎯 Draggable React Drawer


A modern, accessible, and highly customizable draggable drawer component for React applications. Perfect for mobile-first designs, filter panels, forms, and modal-like experiences.

✨ Features

- 🎯 TypeScript Support - Full type safety and IntelliSense
- 📱 Mobile-First Design - Optimized for touch interactions
- ♿ Accessibility - ARIA attributes, keyboard navigation, focus management
- 🎨 Customizable - Snap points, animations, backdrop, and styling
- 🚀 Lightweight - Small bundle size with zero dependencies
- 🧪 Well Tested - Comprehensive test coverage
- 📦 Tree Shakeable - ES modules support
- 🎭 Multiple Positions - Bottom, top, left, right drawer support
- ⚡ React 19 Ready - Optimized for React 19 with concurrent features
- 🔄 Concurrent Rendering - Uses startTransition for smooth animations

📦 Installation

``bash
npm install draggable-react-drawer


or

`tsx
import React, { useState } from 'react';
import { Drawer } from 'draggable-react-drawer';

function App() {
const [isOpen, setIsOpen] = useState(false);

return (


| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | boolean | - | Required. Controls drawer visibility |
| setOpen | (open: boolean) => void | - | Required. Function to control drawer state |
| children | ReactNode | - | Required. Content to render inside drawer |
| verticalRatio | number | 100 | Height ratio (1-100) of the drawer |
| snapPoints | number[] | [0, 0.25, 0.5, 0.75, 1] | Snap points for drawer positioning |
| animationDuration | number | 300 | Animation duration in milliseconds |
| backdrop | boolean | true | Show backdrop overlay |
| onBackdropClick | () => void | - | Callback when backdrop is clicked |
| keyboardAware | boolean | true | Adjust position when keyboard appears |
| className | string | '' | Additional CSS class name |
| style | CSSProperties | {} | Inline styles |
| aria-label | string | - | Accessibility label |
| aria-labelledby | string | - | ID of element that labels the drawer |
| aria-describedby | string | - | ID of element that describes the drawer |
| unstable_useFormStatus | boolean | - | React 19: Enable form status integration |
| unstable_useFormState | boolean | - | React 19: Enable form state integration |

🎨 Examples

$3

`tsx



`tsx
open={isOpen}
setOpen={setIsOpen}
verticalRatio={60}
snapPoints={[0, 0.3, 0.6, 1]}
>


`tsx
open={isOpen}
setOpen={setIsOpen}
backdrop={false}
>


`tsx
open={isOpen}
setOpen={setIsOpen}
className="my-custom-drawer"
style={{
backgroundColor: '#f0f0f0',
borderRadius: '20px 20px 0 0'
}}
>


`tsx
open={isOpen}
setOpen={setIsOpen}
aria-label="Settings Panel"
aria-labelledby="settings-title"
aria-describedby="settings-description"
>


Settings

`tsx
open={isOpen}
setOpen={setIsOpen}
unstable_useFormStatus={true}
unstable_useFormState={true}
>


`bash


Run tests

`bash


Install dependencies

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

- Built with antd-mobile FloatingPanel
- Inspired by modern mobile app patterns
- Community feedback and contributions

🔗 Links

- GitHub Repository
- NPM Package
- Live Demo (Coming Soon)
- Storybook (Coming Soon)

---

Made with ❤️ by Yaşar Tahir Köse