Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-resizer-module with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactResizerModule = require("react-resizer-module")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-resizer-module v1.0.4

Wrapping component, that allows to resize wrapper with handles (width, height and both at the same time).

React Resizer Module

Wrapping component, that allows to resize wrapper with handles (width, height and both at the same time).

Installing:

$ npm install react-resizer-module

React Resizer example code

import React from 'react';
import Resizer from 'react-resizer-module'

const App = () => {
  return (
    <Resizer initialWidth={100} initialHeight={200}>
    // ...
    </Resizer>
  );
}

export default App;

Component params

initialWidth={100} - expects number that represents initial width in pixels
initialHeight={200} - expects number that represents initial height in pixels
widthHandleClass={'your-width-handle-class another-class'} - expects string, adds classes to width handle
heightHandleClass={'your-height-handle-class another-class'} - expects string, adds classes to height handle
widthAndHeightHandleClass={'w-and-h-class another-class'} - expects string, adds classes to width and height handle
childrenWrapId={'your-children-wrap-id'} - expects string, adds id to children wrap
childrenWrapClass={'your-children-wrap-class'} - expects string, adds class to children wrap

{
  initialWidth: number,
  initialHeight: number,
  widthHandleClass: string,
  heightHandleClass: string,
  widthAndHeightHandleClass: string,
  childrenWrapId: string,
  childrenWrapClass: string
};

Clone, build, typecheck

Main JS file src/index.js
Main CSS file src/styles.css

Clone

$ git clone https://github.com/HelloBanksy/react-resizer-module.git
$ cd react-resizer-module
$ npm install

Build

$ npm run build

Typecheck with Flow

$ npm run flow-status
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free