{"id":19252739,"url":"https://github.com/morevm/equal-heights","last_synced_at":"2026-06-29T02:30:20.175Z","repository":{"id":57683108,"uuid":"479533449","full_name":"MorevM/equal-heights","owner":"MorevM","description":"Responsive equal heights library","archived":false,"fork":false,"pushed_at":"2024-01-12T16:24:36.000Z","size":648,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-13T22:03:06.110Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MorevM.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-08T20:44:28.000Z","updated_at":"2022-04-10T17:46:07.000Z","dependencies_parsed_at":"2024-12-23T07:02:03.208Z","dependency_job_id":null,"html_url":"https://github.com/MorevM/equal-heights","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fequal-heights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fequal-heights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fequal-heights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fequal-heights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorevM","download_url":"https://codeload.github.com/MorevM/equal-heights/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240347947,"owners_count":19787236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T18:28:15.303Z","updated_at":"2026-06-29T02:30:18.126Z","avatar_url":"https://github.com/MorevM.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @morev/equal-heights\n\n![Stability of \"master\" branch](https://img.shields.io/github/workflow/status/MorevM/equal-heights/Build/master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![Last commit](https://img.shields.io/github/last-commit/morevm/equal-heights)\n![Release version](https://img.shields.io/github/v/release/morevm/equal-heights?include_prereleases)\n![GitHub Release Date](https://img.shields.io/github/release-date/morevm/equal-heights)\n![Keywords](https://img.shields.io/github/package-json/keywords/morevm/equal-heights)\n\nJavaScript plugin to make elements the same height across different containers. \\\nIn fact, this is a crutch, but it's necessary until we get [CSS Subgrid](https://caniuse.com/css-subgrid) ready.\n\n\u003e If you can use CSS Subgrid - use it. \\\n\u003e This plugin tries to do literally the same, but, of course, is less performant than browsers can do.\n\nPlugin is written in pure JavaScript, so it can be called \"framework agnostic\". \\\nThere is already a version for Vue 2 and 3 done via [directives](https://vuejs.org/guide/reusability/custom-directives.html).\n\n## Table of contents\n\n* [Installation](#installation)\n  * [Using `yarn`](#using-yarn)\n  * [Using `npm`](#using-npm)\n  * [Using `pnpm`](#using-pnpm)\n* [Usage](#usage)\n* [Options](#options)\n* [Methods](#methods)\n* [Vue module](#vue-module)\n  * [Global registration](#global-registration)\n  * [Local registration](#local-registration)\n  * [Example](#examples)\n\n## Installation\n\n### Using `yarn`\n\n```bash\nyarn add @morev/equal-heights\n```\n\n### Using `npm`\n\n```bash\nnpm install @morev/equal-heights\n```\n\n### Using `pnpm`\n\n```bash\npnpm add @morev/equal-heights\n```\n\n## Usage\n\n```js\nimport { EqualHeights } from '@morev/equal-heights';\n\nconst equalHeights = new EqualHeights({\n  /* custom options for all groups of elements (optional) */\n});\n\nequalHeights.add([\n  { selector: '.some-selector', options: { /* custom options for this group of elements (optional) */ } },\n  { selector: '.another-selector' },\n]);\n```\n\n## Options\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003ebyRows\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether only the elements in the same row should have equal height, instead of all the elements in stack.\n\n  ```ts\n  // Default: true\n  export type OptionByRows = boolean;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eisEnabled\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  A function to test whether the elements should have the equal height. Accepts the `window` object as the argument. \\\n  Returns a value that coerces to `true` to set equal height, or to `false` otherwise.\n\n  ```ts\n  // Default: () =\u003e true\n  export type OptionIsEnabled = (window: Window) =\u003e boolean;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eisDisabled\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  A function to test whether the elements should **not** have the equal height. Accepts the `window` object as the argument. \\\n  Returns a value that coerces to `true` to unset equal height, or to `false` otherwise.\n\n  ```ts\n  // Default: () =\u003e false\n  export type OptionIsDisabled = (window: Window) =\u003e boolean;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eresizeObserver\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether to observe resizing of the elements using the `ResizeObserver`.\n\n  ```ts\n  // Default: true\n  export type OptionResizeObserver = boolean;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emutationObserver\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether to observe adding/removing of the elements using the `MutationObserver`.\n\n  ```ts\n  // Default: true\n  export type OptionMutationObserver = boolean;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eparent\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Common parent element of a given elements.\n\n  ```ts\n  // Default: document.body\n  export type OptionMutationObserver = HTMLElement;\n  ```\n\n\u003c/details\u003e\n\n## Methods\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eadd\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Adds a new group(s) of elements and (optionally) its specific options.\n\n  **Parameters:**\n\n  | Name   | Type                                 | Description                                                                                                       |\n  |--------|--------------------------------------|-------------------------------------------------------------------------------------------------------------------|\n  | input* | `string\\|string[]\\|object\\|object[]` | Elements selector, an object structured of `{ selector: string, options?: object }`, or an array of such objects. |\n\n  **Returns:**\n\n  `EqualHeights` - The class instance.\n\n  **Example:**\n\n  ```js\n  import { EqualHeights } from '@morev/equal-heights';\n\n  const equalHeights = new EqualHeights();\n\n  equalHeights.add('.selector-one');\n  equalHeights.add({ selector: '.selector-two', options: { /* custom options (optional) */ } });\n  equalHeights.add([\n    { selector: '.selector-three', options: { /* custom options (optional) */ } },\n    { selector: '.selector-four' },\n  ]);\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eremove\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Removes the elements from the stack.\n\n  **Parameters:**\n\n  | Name      | Type                     | Description                                   |\n  |-----------|--------------------------|-----------------------------------------------|\n  | selector* | `string`                 | Selector of the elements being de-registered. |\n  | parent    | `HTMLElement\\|undefined` | Common parent element.                        |\n\n  **Returns:**\n\n  `EqualHeights` - The class instance.\n\n  **Example:**\n\n  ```js\n  import { EqualHeights } from '@morev/equal-heights';\n\n  const equalHeights = new EqualHeights();\n\n  equalHeights.add([\n    { selector: '.some-selector', options: { parent: document.querySelector('.parent-selector') } },\n    { selector: '.another-selector' },\n  ]);\n\n  // ...\n\n  equalHeights.remove('.some-selector', document.querySelector('.parent-selector'));\n  // only the `.another-selector` elements are being processed now\n  ```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eupdate\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  **Returns:**\n\n  `EqualHeights` - The class instance.\n\n  **Example:**\n\n  ```js\n  import { EqualHeights } from '@morev/equal-heights';\n\n  const equalHeights = new EqualHeights();\n\n  equalHeights.add([\n    { selector: '.some-selector' },\n    { selector: '.another-selector' },\n  ]);\n\n  // ...\n\n  equalHeights.update(); // manually update all the registered elements sizes\n  ```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003ereset\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Restores the initial state of all the registered elements and removes it from the stack.\n\n  **Returns:**\n\n  `EqualHeights` - The class instance.\n\n  **Example:**\n\n  ```js\n  import { EqualHeights } from '@morev/equal-heights';\n\n  const equalHeights = new EqualHeights();\n\n  equalHeights.add([\n    { selector: '.some-selector' },\n    { selector: '.another-selector' },\n  ]);\n\n  // ...\n\n  equalHeights.reset(); // there are no elements being processed now\n  ```\n\n\u003c/details\u003e\n\n\n## Vue module\n\nThe Vue module (2 and 3 both) distributes in the same package and avaliable via a named export called `/vue`.\n\nIn fact, there are three exports: `/vue`, `/vue2` and `/vue3`, and main `/vue` export is dynamical - it mapped to version of Vue used in your project.\n\nUnderhood, it utilized the [postinstall](https://docs.npmjs.com/cli/v8/using-npm/scripts) npm hook. \\\nAfter installing the package, the script will start to check the installed Vue version and redirect the exports to based on the local Vue version. \\\nIf no Vue installation is found, the script will install the version for Vue 3 as default.\n\nIt feels pretty robust, but if you're worried about, prefer an explicit named import according to the version you're using.\n\n\u003e There are also CLI to switch mapping of main export: \\\n\u003e `yarn equal-heights-vue-version \u003cversion\u003e`, where `\u003cversion\u003e` is \"2\" of \"3\"\n\n\u003cdetails\u003e\n  \u003csummary\u003e😥 I got an error \"This dependency was not found\"\u003c/summary\u003e\n\n  For environments that can't resolve `exports` field (such as [Nuxt 2](https://nuxtjs.org/))\n  just replace import with direct path to file:\n\n  ```js\n  import { plugin as EqualHeights } from '@morev/equal-heights/dist/vue.cjs';\n  ```\n\n\u003c/details\u003e\n\n### Global registration\n\n#### Vue 2\n\n```js\nimport Vue from 'vue';\nimport { plugin as EqualHeights } from '@morev/equal-heights/vue';\n\nVue.use(EqualHeights);\n```\n\n#### Vue 3\n\n```js\nimport { createApp } from 'vue';\nimport { plugin as EqualHeights } from '@morev/equal-heights/vue';\n\nconst app = createApp(App);\napp.use(EqualHeights);\n```\n\n### Local registration\n\n```vue\n\u003ctemplate\u003e\n  \u003cul class=\"list\" v-equal-heights=\"'.item-title'\"\u003e\n    // ...\n  \u003c/ul\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { directive as equalHeights } from '@morev/equal-heights/vue';\n\n  export default {\n    name: 'some-component',\n    directives: { equalHeights },\n    // ...\n  }\n\u003c/script\u003e\n```\n\n---\n\n### Examples\n\n#### Single selector\n\n```vue\n\u003ctemplate\u003e\n  \u003cul v-equal-heights=\"'.item-tags'\"\u003e\n    \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e\n      \u003cdiv class=\"item-tags\"\u003e...\u003c/div\u003e\n      \u003cimg class=\"item-image\" src=\"...\" alt=\"Product image\" /\u003e\n      \u003cdiv class=\"item-title\"\u003e...\u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n---\n\n#### Multiple selectors\n\n```vue\n\u003ctemplate\u003e\n  \u003cul v-equal-heights=\"['.item-tags', '.item-title']\"\u003e\n    \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e\n      \u003cdiv class=\"item-tags\"\u003e...\u003c/div\u003e\n      \u003cimg class=\"item-image\" src=\"...\" alt=\"Product image\" /\u003e\n      \u003cdiv class=\"item-title\"\u003e...\u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n---\n\n#### Custom options\n\n```vue\n\u003ctemplate\u003e\n  \u003cul\n    v-equal-heights=\"{\n      selector: '.item-tags', // May also be an array of strings\n      options: {\n        isEnabled: (window) =\u003e window.innerWidth \u003e= 768,\n      }\n    }\"\n  \u003e\n    \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e\n      \u003cdiv class=\"item-tags\"\u003e...\u003c/div\u003e\n      \u003cimg class=\"item-image\" src=\"...\" alt=\"Product image\" /\u003e\n      \u003cdiv class=\"item-title\"\u003e...\u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n---\n\n#### Multiple groups with custom options\n\n```vue\n\u003ctemplate\u003e\n  \u003cul\n    v-equal-heights=\"[\n      {\n        selector: '.item-tags', // May also be an array of strings\n        options: {\n          isEnabled: (window) =\u003e window.innerWidth \u003e= 768,\n        }\n      },\n      {\n        selector: '.item-title', // May also be an array of strings\n        options: {\n          isEnabled: (window) =\u003e isAligned \u0026\u0026 window.innerWidth \u003e= 360,\n        }\n      }\n    ]\"\n  \u003e\n    \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e\n      \u003cdiv class=\"item-tags\"\u003e...\u003c/div\u003e\n      \u003cimg class=\"item-image\" src=\"...\" alt=\"Product image\" /\u003e\n      \u003cdiv class=\"item-title\"\u003e...\u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fequal-heights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorevm%2Fequal-heights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fequal-heights/lists"}