React Equalizer

Pure React component which equalizes heights of components.

Installation

npm install --save react-equalizer

Usage

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>

Options

(component, node) =>
  node.children

Simple example with options

<Equalizer
  byRow={false}
  property="maxHeight"
  enabled={() => window.matchMedia("(min-width: 400px)").matches}>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</Equalizer>

Specifying nodes example

This can be useful if you want to equalize components other than direct descendants.

class MyComponent extends Component {
  getNodes(equalizerComponent, equalizerElement) {
    return [
      this.refs.node1,
      this.refs.node2,
      this.refs.node3
    ]
  }

  render() {
    return(
      <Equalizer nodes={() => this.getNodes()}>
        <div ref={n => this.node1 = n}></div>
        <div>
          <div ref={n => this.node2 = n}></div>
        </div>
        <div ref={n => this.node3 = n}></div>
      </Equalizer>
    )
  }
}

Demo

http://jsbin.com/ceyumumuye/edit?js,output

Running Tests

Grab the latest source and in the project directory run:

npm install
npm test

Roadmap

• 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.

References

• Zurb Foundation Equalizer
• jQuery Match Height