react-resizable-element

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.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Jest

Jest tests are set up to run with yarn test or npm test.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Rollup

TSDX uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings.