React-resizable-element NPM

react-resizable-element

npm bundle size GitHub Workflow Status Coveralls branch dependencies status npm

The above demo is hosted through example directory on github pages.

Installation

yarn add react-resizable-element # or npm i --save react-resizable-element

Usage

import { Resizable } from 'react-resizable-element';

const App = () => {
  return (
    <Resizable direction="right">
      <div>Resizable Content</div>
    </Resizable>
  );
};

import { useResizable } from 'react-resizable-element';

const App = () => {
  const { container, handle } = useResizable({ direction: 'right' });
  return (
    <div className="container" ref={container}>
      <span className="handle" ref={handle} />
      <div>Resizable Content</div>
    </div>
  );
};

`Resizable`

Prop	Type	Default	Description
classes	`{ root: string; handle: string }`	`{}`	CSS class applied to root and handle elements
className	`string`		CSS class applied to root element
direction	`'top'` \| `'bottom'` \| `'right'` \| `'left'`		Direction of resize
minSize	`number`	0	Minimum threshold in pixels
maxSize	`number`	10000	Maximum threshold in pixels
resizable	`boolean`	`true`	Enable/disable resizing of elements
style	`React.CSSProperties`	`{}`	`style` applied to root element

`useResizable`

Parameters: an object of options for this Resizable hook

Name	Type	Default	Description
direction	`'top'` \| `'bottom'` \| `'right'` \| `'left'`		Direction of resize
minSize	`number`	0	Minimum threshold in pixels
maxSize	`number`	10000	Maximum threshold in pixels

Return Values

Name	Type	Description
container	`MutableRefObject`	Pass it to resizable container element
handle	`MutableRefObject`	Pass it to handle element to add `onPointerDown` event for resizing
isResizing	`boolean`	Flag for determining if container is being resized

Optimizations

react-resizable-element ensures that your app has:

no unnecessary code imported:
The package is tree shakeable which means if you are importing useResizable hook only, it'll make sure unused Resizable component won't be bundled in your application.
no unnecessary re-renders:
Core of the package works without any re-renders even when you use useResizable. But if you have any use-case where you have to use isResizing flag then you will get 2 re-renders on demand, i.e. when user start and stop resizing.

without any code changes from you.

Contribution

Commands

TSDX has been used to scaffold this package inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

yarn start # or npm start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
yarn # or npm i to install dependencies
yarn start # or npm start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.