Resizer Component (Experimental) [WIP]
storybook: https://resizer.messafilip.now.sh
Main Scripts
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
Examples
Here is a minimal example. (without styles)
import React from "react";import Resizer from "messa-resizer"; const App = return <Resizer>Resizer component</Resizer>;;
Component props
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,
|};
TODOs
- 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
Requirments
- Use ES6 (with Flow) or TypeScript
- Third-party apps should be able to modify styles
- The example should work in Chrome, Firefox and Safari
- Use React
- Add unit tests (each component should be covered)