3.0.5 • Published 4 years ago
af-react-grid v3.0.5
af-react-grid
Resizable and customizable flexbox grid for React. Usage example
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
anddata-resizer-type
, so their styling could be customized easily; resizerChildren
andresizerClassName
props are passed deep to all nestedContainer
s, so you want to declare these props only on rootContainer
. Of course they may be overriden anywhere;maxHeight
,minHeight
,maxWidth
,minWidth
are considered even if not declared inline, because their values are taken fromgetComputedStyle
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, likesomeGridName_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( usedist/resizer.style.css
as an example )
TODO
- Support
React.Fragment
children. - Add types
findDomNode
refuse ( maybe? )
3.0.5
4 years ago
3.0.4
4 years ago
3.0.3
4 years ago
3.0.1
4 years ago
3.0.0
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.1.10
5 years ago
1.1.9
5 years ago
1.1.8
5 years ago
1.1.7
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago