# vanilla-js-match-height

> A jQuery free equivilent of jQuery match height, a simple, lightweight way to make elements the same height.

Latest version **1.0.7** (published 2024-08-19) · ISC license · 157 weekly downloads

## Install

```sh
npm install vanilla-js-match-height
pnpm add vanilla-js-match-height
yarn add vanilla-js-match-height
bun add vanilla-js-match-height
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-08-19 |
| First published | 2022-08-19 |
| Weekly downloads | 157 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Josh Donnell |
| Maintainers | joshdonnell |
| Keywords | match-height, js, js-match-height, vanilla-js |

## Links

- npm: https://www.npmjs.com/package/vanilla-js-match-height
- Repository: https://github.com/JoshDonnell/vanilla-js-match-height
- Homepage: https://github.com/JoshDonnell/vanilla-js-match-height#readme
- Issues: https://github.com/JoshDonnell/vanilla-js-match-height/issues
- npm.io page: https://npm.io/package/vanilla-js-match-height

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-08-19
- 1.0.6 — 2023-05-11
- 1.0.5 — 2023-05-11
- 1.0.4 — 2023-05-11
- 1.0.3 — 2023-05-11
- 1.0.2 — 2023-05-11
- 1.0.1 — 2022-10-13
- 1.0.0 — 2022-09-05
- 0.2.2 — 2022-09-05
- 0.2.1 — 2022-08-30
- 0.2.0 — 2022-08-26
- 0.1.0 — 2022-08-23
- 0.0.9 — 2022-08-23
- 0.0.8 — 2022-08-23
- 0.0.7 — 2022-08-23
- … 6 more at https://npm.io/package/vanilla-js-match-height/versions

## README

<h1 align="center">Vanilla JS Match Height</h1>

<p align="center">A jQuery free equivilent of jQuery match height, a simple, lightweight way to make elements the same height. At 2kb ( 1.1kb Gziped ) this tiny package packs a big punch of functionality with helpers to make your life easier.</p>

---

## Contents

- [Docs](https://joshdonnell.github.io/vanilla-js-match-height/)
- [Install](#install)
- [How To Use](#how-to-use)
- [Examples](#examples)
- [Author](#author)
- [Support](#support)

## Install

1. Install the package.

```bash
npm install vanilla-js-match-height
```

2. Import the package into your application script.

```js
import MatchHeight from 'vanilla-js-match-height';
```

Or include the script in your HTML.

```html
<script async src="vanilla-js-match-height/dist/index.js"></script>
```


## How To Use 
( Basic usage )

```js
import MatchHeight from 'vanilla-js-match-height';

// New MatchHeight - The only required parameter 
// is the element class at the start. The second parameter
// is an optional object for the settings. The 3 settings
// that can be passed into this object are, parent, byRow
// and timeOut.
new MatchHeight(Element, Options);

// Full Example of the format
new MatchHeight('.my-class', 
    {
        parent: '.my-parent', // A parent class or ID to group items ( Default value : null )
        byRow: true, // Use the elemnt offset to group them by row ( Default value : true )
        timeOut: 300 // Sets A Timout On Load mainly for sliders ( Default value : 50 )
    }
);
```

Out of the box Vanilla JS Match Height will update on resize and will recalculate the rows on resize too.

## Examples

- [Basic Example](https://codepen.io/joshdonnell/pen/zYWVOVo)
<!-- - [Parent Example](https://codepen.io/tannerhodges/pen/699e29b01d4851ccde4052486cfec63c)
- [ByRow Disabled Example](https://codepen.io/tannerhodges/pen/d38706e6bbc7ac61e2942ab4a3d292d6)
- [Update Example](https://codepen.io/tannerhodges/pen/f0718f8b1649acb1c1d191564e0477e0)
- [Reset Example](https://codepen.io/tannerhodges/pen/f0718f8b1649acb1c1d191564e0477e0)
- [Debug Example](https://codepen.io/tannerhodges/pen/f0718f8b1649acb1c1d191564e0477e0) -->

See the [Docs](https://joshdonnell.github.io/vanilla-js-match-height/) for the full list of options.

## Author

**Josh Donnell**

- [Profile](https://github.com/joshdonnell "Josh Donnell")
- [Email](mailto:hello@joshdonnell.co.uk?subject=Hi "Hi!")
- [Twitter](https://twitter.com/JoshDonnell97 "Twitter")

## Support

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!

---
_Source: https://npm.io/package/vanilla-js-match-height · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._