Messa-resizer NPM

Resizer Component (Experimental) WIP

storybook gif

add to your a project

yarn add messa-resizer

install dependencies

yarn install

run storybook:

yarn storybook

run all test: (flow & eslint & jest)

yarn test

build library:

yarn build

Here is a minimal example. (without styles)

import React from "react";
import { Resizer } from "messa-resizer";

const App = () => {
  return <Resizer>Resizer component</Resizer>;
};

Name	Type	Default	Description
children	`React.Node`		The content of the Resizer.
style	`StyleObject`		The root container's styles.
className	`string`		The root container's classNames.
defaultWidth	`number`		The defaultWidth of the Resizer.
defaultHeight	`number`		The defaultHeight of the Resizer.
maxHeight	`number`	Infinity	The maxHeight of the Resizer.
minHeight	`number`	20	The minHeight of the Resizer.
maxWidth	`number`	Infinity	The maxWidth of the Resizer.
minWidth	`number`	20	The minWidth of the Resizer.
handlersStyles	`HandlersStyles`		The handlebars' inline-styles.
handlersClassNames	`HandlersClassNames`		The handlebars' inline-styles.

type HandlersStyles = {|
  +bottom?: StyleObject,
  +right?: StyleObject,
  +"bottom-right"?: StyleObject
|};

type HandlersClassNames = {|
  +bottom?: string,
  +right?: string,
  +"bottom-right"?: string,
|};

the defaultHeight and defaultWidth should handle string ('auto', '12px', '100%', etc...)
add E2E tests (cypress or Puppeteer)
The Handlebar component should be able to have children
improve unit tests
improve styles extend API
continuous integration
Add handlebars for left and top