ResizableContainer

A resizable and collapsible container component for React applications.

ResizableContainer
ResizableContainer Component

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:

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.

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:

// 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"
/>