react-height-matching-group
v1.0.8
Published
Matches the heights of contained elements based on provided selector string, responds with window resize
Downloads
55
Maintainers
Readme
Usage
Wrap elements with HeightMatchingGroup
and provide a selector (used by querySelectorAll
internally). HeightMatchingGroup will automatically match the height of all matching descendants to the descendant with the largest scrollHeight.
import HeightMatchingGroup from 'react-height-matching-group'
/* inside render function */
<HeightMatchingGroup tagName="div" className="row" selector=".match-height">
<div className="col-md-4">
<div className="match-height">
//content
</div>
</div>
<div className="col-md-4">
<div className="match-height">
//content
</div>
</div>
<div className="col-md-4">
<div className="match-height">
//content
</div>
</div>
</HeightMatchingGroup>
Accepted properties
tagName
- the type of element used to wrap the children. Default:span
selector
- the selector string used in conjunction withquerySelectorAll
to select the descendants that will be height-matched. Default:.match-height
className
- the className string to pass to the container.