Resizable and customizable flexbox grid for React. Usage example
/* Include these 2 css files somewhere in your index.js */
import "af-react-grid/dist/style.css";
/* If you want custom resizer style - do not import this file */
import "af-react-grid/dist/resizer.style.css";
import { Container, Resizer } from "af-react-grid";
<Containter localStorageKey="someGridName" type="row">
<div>Child 1</div>
<Resizer />
<div>Child 2</div>
<Resizer>
<Containter type="row">
<div>Subchild 1</div>
<Resizer />
<div>Subchild 2</div>
</Container>
</Container>
type: ?( "row" | "col" ) = "row",
className: ?string,
style: ?object,
children: ?node,
/* Next 2 props are passed down as default props to Resizer and Container children*/
resizerChildren: ?node,
resizerClassName: ?string = "react-rsz-grid-default-resizer",
localStorageKey: ?string
className: ?string,
style: ?object,
children: ?node
disabled: ?bool
data-resizer-index
and data-resizer-type
, so their styling could be customized easily;resizerChildren
and resizerClassName
props are passed deep to all nested Container
s, so you want to declare these props only on root Container
. Of course they may be overriden anywhere;maxHeight
, minHeight
, maxWidth
, minWidth
are considered even if not declared inline, because their values are taken from getComputedStyle
before drag starts;Resizer
? resizerChildren
prop allows you to render custom child elements, which could be easily styled;localStorageKey
prop is passed down to children with child index added, like someGridName_0_2
, until overriden;key
prop, it's dimensions are saved by key, otherwise by it's index, so be careful to use unique keys;overflow: auto
on containers, you must either set it globally( add overflow rule to default container class ), or individually;React.Fragment
children are not yet supported;Resizer
, which is first or last child, does nothing( see example );Resizer
styling by providing your own css( use dist/resizer.style.css
as an example )React.Fragment
children.findDomNode
refuse ( maybe? )