1.0.0 • Published 1 year ago

use-vanilla-ref v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

Use (Vanilla) Ref

This library - obviously inspired by the react hook - allows you to create a distinct reference to an object easily.

Table of Contents

Installation

You can install this via NPM:

npm install use-vanilla-ref

Usage

You can use the library when creating an html element; For example, lets say you added a title to your body:

document.body.innerHtml = '<h1>Hello World</h1>';

And now you want to add an exclamation mark to it every time the user clicked on it.

In that case, you'd first run the useRef function:

const [ref, selector] = useRef();

Then you'd add the ref to the element:

document.body.innerHtml = `<h1 ${ref}>Hello World</h1>`;

Finally, you can use the selector function to select the element and add the listener:

const titleElement = selector();

titleElement.addEventListener('click', () => (titleElement.innerText += '!'));

Docs

useRef: () => [ string, (() => HTMLElement) ]

Parameters: none

Returns: An array made up of 2 elements:

  • ref: string - A string, which one can add as a part of an html tag.

    Example:

    const [ref, _] = useRef();

document.body.innerHtml += `<some-element ${ref} />`;

  • selector: () => HTMLElement - A function which takes in no parameters and returns the HTML Element which had the ref property.

    Example:

    const [ref, selector] = useRef();

document.body.innerHtml += `<p ${ref}>Hello</p>`;

selector().innerText += '!';

// result:
// <body>
//   <p>Hello!</p>
// </body>
vanila-jsuse-ref
random-seed
@everything-registry/sub-chunk-3028
1.0.0

1 year ago