react-plan

1.3.0 • Public • Published

REACT PLAN npm version

MOTIVATION

The main goal of this library is to provide a declarative (JSX) way to build a responsive webapp leveraging the flex model.

DEMOS

//TODO

INSTALL

npm i --save react-plan

USAGE

Containers (Rows & columns)

The container classes, Rows and Colums create flex containers DOM elements. They share the same props, the only difference betwwen the two is that they have the flex-direction attribute set to row or column by default.

Available props:

Prop Type Description Values
align String Sets the align-items alignement on the flex axis flex-start, flex-end, center, baseline, stretch (default)
className String A Classname being passed to the flex container. If responsive breakpoints are set, the current breakpoint value is appended to the className. Any
itemDefaults Object Allows to pass default props to all the child Items. An object of Item props.
justify String Sets the justify-content flex property flex-start, flex-end, center, space-between, space-around
noWrap Bool Sets the flex-wrap property to nowrap By default, in order to support responsive layouts all the containers are set to wrap, if you wish to override this behavior set this prop to true.
reverse Bool Reverses the container's flex-direction
size Number or String Sets the flex property If a number is provided (1), the flex shorthand property is set: flex: 1, if a width is provided ('20%'), the flex shortahnd property is set as follows flex: 1 10%
small Number or String Sets and override the size property when the small breakpoint is active. When set to 'hide', it prevents rendering the children when the small breakpoint is active.
medium Number or String Sets and override the size property when the medium breakpoint is active. When set to 'hide', it prevents rendering the children when the medium breakpoint is active.
large Number or String Sets and override the size property when the large breakpoint is active. When set to 'hide', it prevents rendering the children when the large breakpoint is active.
wide Number or String Sets and override the size property when the wide breakpoint is active. When set to 'hide', it prevents rendering the children when the wide breakpoint is active.

Items

The Item class creates flex item DOM elements.

Available props:

Prop Type Description Values
align String Sets the align-self alignement on the flex axis flex-start, flex-end, center, baseline, stretch (default)
className String A Classname being passed to the flex container. If responsive breakpoints are set, the current breakpoint value is appended to the className. Any
order Number Sets the order flex property 1, 2, 3, ...
size Number or String Sets the flex property If a number is provided (1), the flex shorthand property is set: flex: 1, if a width is provided ('20%'), the flex shortahnd property is set as follows flex: 1 10%
small Number or String Sets and override the size property when the small breakpoint is active. When set to 'hide', it prevents rendering the children when the small breakpoint is active.
medium Number or String Sets and override the size property when the medium breakpoint is active. When set to 'hide', it prevents rendering the children when the medium breakpoint is active.
large Number or String Sets and override the size property when the large breakpoint is active. When set to 'hide', it prevents rendering the children when the large breakpoint is active.
wide Number or String Sets and override the size property when the wide breakpoint is active. When set to 'hide', it prevents rendering the children when the wide breakpoint is active.

CONTRIBUTE

//TODO

Package Sidebar

Install

npm i react-plan

Weekly Downloads

5

Version

1.3.0

License

MIT

Last publish

Collaborators

  • fdidron