z-hook-finder

Finds JS hooks in a given DOM element, inspired by the DOM methodology.

Usage no npm install needed!

<script type="module">
  import zHookFinder from 'https://cdn.skypack.dev/z-hook-finder';
</script>

README

z-hook-finder

Build Status npm version

What is it

This module was created to handle a BEM-like solution to find JS "hooks".

Here a JS hook means the same for a module as a BEM element means for a block.

As an additional "convention", I use a js- prefix for the classnames, which is used to differenciate JS classes from classes used solely for design by CSS.

Example, explanations:

<!-- The "module" JS module -->
<div id="js-module">
    <div class="js-module__button"></div>
    <div class="js-module__button"></div>
    <div class="js-module__button"></div>
</div>

var HookFinder = require('z-hook-finder');

var finder = new HookFinder($('#js-module'), 'js-module__');
// Alternatively you can pass the separator "__" or something else as the third
// parameter: `new HookFinder($('#js-module'), 'js-module', '__');`

finder.find('button');
// -> returns the jQuery object for the DOM element

finder.find('button', 2);
// -> returns only the first 2 buttons, and outputs a console error

Since this is a CommonJS module, it must be used alongside with Browserify, or something similar, like WebPacker.

License

MIT