Resizable and customizable flexbox grid for React

af-react-grid

Resizable and customizable flexbox grid for React.

Code 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>

Container props

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

Resizer props

className: ?string,

style: ?object,

children: ?node

disabled: ?bool

Features

• Very small, exported as es modules (own code 3.5kb + react + react-dom + react-draggable + classNames)
• Resizers are also given data-resizer-index and data-resizer-type, so their styling could be customized easily;
• resizerChildren and resizerClassName props are passed deep to all nested Containers, 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;
• Want to have a super-highly customized 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;
• If a child has key prop, it's dimensions are saved by key, otherwise by it's index, so be careful to use unique keys;

Tooltips

• If tou want 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 );
• Feel free to customize Resizer styling by providing your own css( use dist/resizer.style.css as an example )

TODO

• Support React.Fragment children.
• Add types
• findDomNode refuse ( maybe? )

GitHub