Skip to content

mrmuhammadali/react-resizable-element

Repository files navigation

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.

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.