resizable-container
Version:
A resizable and collapsible container component for React applications.
122 lines (95 loc) • 5.65 kB
Markdown
# [ResizableContainer](https://olabayoji.github.io/resizable-container/)
A resizable and collapsible container component for React applications.
## Table of Contents
- [ResizableContainer](#resizablecontainer)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [ResizableContainer Component](#resizablecontainer-component)
- [Keyboard Shortcuts](#keyboard-shortcuts)
- [Styling](#styling)
- [Examples](#examples)
## Installation
To use the `ResizableContainer` component in your React project, you can install it via npm or yarn:
//add instalation script
## Usage
Import the `ResizableContainer` component and use it in your React application:
```jsx
import ResizableContainer from 'resizable-container';
const MyComponent = () => {
return (
<ResizableContainer
direction="right"
initialSize={300}
minSize={200}
maxSize={500}
boundSize={100}
storageKey="my-resizable-container"
>
<div>
This is the content inside the resizable container.
</div>
</ResizableContainer>
);
};
```
# ResizableContainer Component
The `ResizableContainer` component accepts the following props:
| Prop | Type | Default | Description |
| ------------------------- | ------------------------------------------- | --------- | -------------------------------------------------------------------------------------------- |
| `children` | `ReactNode` | - | The content to be displayed inside the resizable container. |
| `direction` | `"right" \| "left" \| "top" \| "bottom"` | `"right"` | The direction in which the container is resizable. |
| `toggleKey` | `string` | - | The key that triggers the toggle collapse functionality when pressed with `Ctrl`. |
| `initialSize` | `number \| string` | - | The initial size of the container. |
| `minSize` | `number \| string` | - | The minimum size of the container. |
| `maxSize` | `number \| string` | - | The maximum size of the container. |
| `boundSize` | `number \| string` | - | The bound size of the container. |
| `onResize` | `(size: number) => void` | - | Callback function called when the container is resized. |
| `animationDuration` | `number` | `300` | The duration of the animation when the container is collapsed. |
| `storageKey` | `string` | - | The key used to store the container size in `localStorage`. |
| `ariaLabel` | `string` | - | The `aria-label` for the container. |
| `containerClassName` | `string` | - | Additional CSS class for the container. |
| `sliderClassName` | `string` | - | Additional CSS class for the slider. |
| `toggleButtonClassName` | `string` | - | Additional CSS class for the toggle button. |
| `toggleButtonIcon` | `string` | `[` | The icon for the toggle button |
## Keyboard Shortcuts
The `ResizableContainer` component supports the following keyboard shortcut:
- **Ctrl + [toggleKey]**: Toggle the collapse/expand state of the container.
## Styling
The `ResizableContainer` component uses CSS modules for styling. You can override the default styles by passing additional class names through the `containerClassName`, `childWrapperClassName`, `sliderClassName`, and `toggleButtonClassName` props.
## Examples
Here are a few examples of how to use the `ResizableContainer` component:
```jsx
// Resizable container on the right side
<ResizableContainer
direction="right"
initialSize={300}
minSize={200}
maxSize={500}
storageKey="my-resizable-container"
/>
// Resizable container on the left side
<ResizableContainer
direction="left"
initialSize="50%"
minSize={200}
maxSize="80%"
storageKey="my-left-resizable-container"
/>
// Resizable container on the top
<ResizableContainer
direction="top"
initialSize={200}
minSize={100}
maxSize={400}
storageKey="my-top-resizable-container"
/>
// Resizable container on the bottom
<ResizableContainer
direction="bottom"
initialSize={300}
minSize={200}
maxSize={500}
storageKey="my-bottom-resizable-container"
/>