diff --git a/README.md b/README.md index 04fb16a..60413a7 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,9 @@ Find [eqheights on npm](https://www.npmjs.com/package/eqheights) npm i eqheights ``` -## Usage +## Usage Examples + +Simplest, one off: ```javascript import eqheights from 'eqheights'; @@ -24,6 +26,41 @@ const elements = document.querySelectorAll('.list-items'); eqheights(elements); ``` +Responsive: + +```javascript +import eqheights from 'eqheights'; + +const gridEqualizer = eqheights('.grid-items'); +window.addEventListener('resize', gridEqualizer.recalc); +``` + +Togglable: + +```javascript +import eqheights from 'eqheights'; + +// autorun = false because we +// want to initialize only, +// not run eqheights yet +const {recalc, clear} = eqheights('.grid-items', {autorun: false}); + +const container = document.getElementById('grid'); +document + .getElementById('toggle') + .addEventListener('click', () => { + Array.prototype.indexOf(container.classList, 'active') < 0 + ? recalc() + : clear(); + + container.classList.toggle('active'); + }); +``` + +Togglable and Responsive: + +See this codepen: http://codepen.io/Maximilianos/pen/OyBYvv?editors=001 + ## License MIT © [Max GJ Panas](maxpanas.com)