Skip to content
This repository has been archived by the owner on May 19, 2020. It is now read-only.

Matches the heights of contained elements based on a supplied selector string, attaches event to window resize so it responds

Notifications You must be signed in to change notification settings

thezanke/react-height-matching-group

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 with querySelectorAll to select the descendants that will be height-matched. Default: .match-height
  • className - the className string to pass to the container.

About

Matches the heights of contained elements based on a supplied selector string, attaches event to window resize so it responds

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published