https://github.com/neomaxzero/react-equalize

Match the elements to the same height in a row
https://github.com/neomaxzero/react-equalize

equalize equalizer same-height

Last synced: about 1 month ago
JSON representation

Match the elements to the same height in a row

• Host: GitHub
• URL: https://github.com/neomaxzero/react-equalize
• Owner: neomaxzero
• License: mit
• Created: 2020-03-21T19:05:03.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-31T11:45:06.000Z (over 1 year ago)
• Last Synced: 2025-01-15T21:43:25.754Z (about 1 year ago)
• Topics: equalize, equalizer, same-height
• Language: JavaScript
• Size: 1.84 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



[![CircleCI](https://circleci.com/gh/neomaxzero/react-equalize.svg?style=shield)](https://circleci.com/gh/neomaxzero/react-equalize)

Equalize the height of your elements in your page. 

- Check what I mean [-->here<--](https://raw.githubusercontent.com/neomaxzero/react-equalize/master/zictu.csb.app_.png)

## Installation

```bash

    npm install react-equalize

```

## Usage

1. Wrap the list of elements you want to equalize the height

```javascript

import React from "react";

import { EqualizerContainer } from "react-equalize";

import samples from './samples';

import Card from './Card';

const List = () => (

  


    
List

    

      {samples.map(sample => (

	      

      ))}

    

	

);


export default List;

```

2. Equalize the elements of your choice

```javascript

// Card.js

import React from "react";

import { Equalize } from "react-equalize";

const Card = ({ title, img, description }) => (

  


    


      {title}

    

    

      

    

    


      {description}

    

  

);


export default Card;

```

[![Edit react-equalize-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xenodochial-stallman-zictu?fontsize=14&hidenavigation=1&theme=dark)

## API 

### 

| Prop | Type | Description |

| --- | :---: | --- |

| `elements` | `Array` | List of elements that should re-trigger the calculation.