# resizable-rc-drawer

> This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Latest version **1.1.0** (published 2024-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install resizable-rc-drawer
pnpm add resizable-rc-drawer
yarn add resizable-rc-drawer
bun add resizable-rc-drawer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-05-30 |
| First published | 2024-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Sabit Alizade |
| Maintainers | sabitalizade |
| Keywords | resizable-rc-drawer, resizable, rc, rc-drawer, react, react-component, react-drawer, drawer, drawer-menu, rc-drawer-menu, react-drawer-menu, animation, drawer-motion, drawer-animation |

## Links

- npm: https://www.npmjs.com/package/resizable-rc-drawer
- Repository: https://github.com/sabitalizade/resizable-rc-drawer
- Homepage: https://github.com/sabitalizade/resizable-rc-drawer#readme
- Issues: https://github.com/sabitalizade/resizable-rc-drawer/issues
- npm.io page: https://npm.io/package/resizable-rc-drawer

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [rc-drawer](https://npm.io/package/rc-drawer.md) ^7.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-05-30
- 1.0.1 — 2024-04-25
- 1.0.0 — 2024-03-27
- 0.0.9 — 2024-03-08
- 0.0.8 — 2024-03-08
- 0.0.7 — 2024-03-08
- 0.0.6 — 2024-03-07
- 0.0.5 — 2024-03-07
- 0.0.4 — 2024-03-07

## README

**Library Name: `resizable-rc-drawer`**

## Description

The `resizable-rc-drawer` library is an extension of the popular `rc-drawer` library with added functionality for resizable drawers. `rc-drawer` is a widely used library for creating customizable and responsive drawers in web applications. With resizable-rc-drawer, users can resize the drawers dynamically, providing enhanced flexibility and usability.

## Installation

You can install `resizable-rc-drawer` via npm:

```bash
npm install resizable-rc-drawer
```

## Usage

Using resizable-rc-drawer is similar to using `rc-drawer`. Simply import the component and use it in your React application. The resizable functionality is enabled by default.

```jsx
import React from 'react';
import  Drawer  from 'resizable-rc-drawer';

const MyComponent = () => {
  return (
    <Drawer
      width={300} // initial width of the drawer
      minWidth={500} // min width of the drawer
      maxWidth={500} // max width of the drawer
      onClose={() => {}} // function to be called when the drawer is closed
    >
      {/* Content of the drawer */}
    </Drawer>
  );
}

export default MyComponent;
```

## Props

resizable-rc-drawer supports all the props available in `rc-drawer` along with additional props for controlling the resizable functionality.

### Additional Props

- **width** *(number)*: The minimum width the drawer can be resized to.

| Props         | Description                                                               | Type            | Default                | Version |
| ------------- | ------------------------------------------------------------------------- | --------------- | ---------------------- | ------- |
| title         | The title for Drawer                                                      | ReactNode       | -                      | 0.0.9   |
| titleClosable | Whether the Drawer title close icon is visible or not                     | boolean         | true                   | 1.0.1   |
| width         | Width of the Drawer dialog                                                | string\| number | 378                    | 0.0.9   |
| minWidth      | Minumum Width of the Drawer dialog on resize                              | number          | width\| 378            | 1.0.0   |
| maxWidth      | Maximum Width of the Drawer dialog on resize                              | number          | window.innerWidth - 10 | 1.0.0   |
| onResize      | Specify a callback that will be called when a user resizing Drawer dialog | function(width) | -                      |         |

### Inherited Props

All props from `rc-drawer` can also be used.

## Contributing

Contributions are welcome! If you have any suggestions, bug fixes, or improvements, feel free to open an issue or create a pull request on the GitHub repository.

## License

This library is licensed under the MIT License. See the LICENSE file for details.

## Acknowledgments

This library is built upon `rc-drawer`, and we are grateful for the contributions of its maintainers and contributors.

## Author

Sabit Alizade

---
_Source: https://npm.io/package/resizable-rc-drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._