Pure React component which equalizes heights of components.
npm install --save react-equalizer
This is a basic example which equalizes height of child components.
<Equalizer><div>Child 1</div><div>Child 2</div><div>Child 3</div></Equalizer>| Prop | Default | Description |
|---|---|---|
property | height |
The style property used when setting height. Usually height, maxHeight or minHeight.
|
byRow | true | By default Equalizer will attempt to take into account stacking by matching rows by their window offset. |
enabled | (component, node) => true |
Takes a function that returns true or false and can be used to disable Equalizer. Useful if you want to disable Equalizer when something changes such as window width or height based on a media query..
|
nodes | | Function which returns nodes to equalize. By default Equalizer only measures the heights of its direct descendants. |
<EqualizerbyRow={false}property="maxHeight"enabled={()=>window.matchMedia("(min-width: 400px)").matches}><div>Child 1</div><div>Child 2</div><div>Child 3</div></Equalizer>This can be useful if you want to equalize components other than direct descendants.
classMyComponentextendsComponent{getNodes(equalizerComponent,equalizerElement){return=[this.refs.node1,this.refs.node2,this.refs.node3]}render(){return(<Equalizernodes={this.getNodes.bind(this)}><divref="node1"></div><div><divref="node2"></div></div><divref="node3"></div></Equalizer>)}}http://jsbin.com/ceyumumuye/edit?js,output
Grab the latest source and in the project directory run:
npm install
npm test
- Add support for setting height of Equalizer component based on total height of children. This will be useful if children are positioned absolutely and the container needs to have a fixed height.
- Zurb Foundation Equalizer
- jQuery Match Height