Skip to content

patrickgalbraith/react-equalizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

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

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
(component, node) =>
  node.children
Function which returns nodes to equalize. By default Equalizer only measures the heights of its direct descendants.

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