Data Attributes Utils

A simple JavaScript utility to fetch and parse data attributes from HTML elements. Perfect for modern web development, this utility helps you easily extract custom data attributes and converts them to their respective JavaScript types where possible.

Installation

Via NPM:

npm install @frankhoodbs/data-attributes-utils

Usage

Here's a basic example on how to use the getDataAttributes utility:

import { getDataAttributes } from '@frankhoodbs/data-attributes-utils';

const element = document.querySelector('.your-element-class');

const dataAttributes = getDataAttributes(element);
console.log(dataAttributes);

The function will retrieve all data attributes from the provided HTML element and return them as a parsed JavaScript object. If a data attribute contains a stringified JSON, the utility will automatically parse it into its appropriate JS type.

API

getDataAttributes(el: HTMLElement): Record<string, any>

• el: The HTML element from which you want to retrieve the data attributes.

Returns a JavaScript object containing the data attributes and their parsed values.

Example

Given the following HTML:

<div
  class="example"
  data-name="John Doe"
  data-age='30'
  data-hobbies='["reading", "cycling"]'
>
  Example Element
</div>

And the usage:

const element = document.querySelector('.example');
const dataAttributes = getDataAttributes(element);

console.log(dataAttributes);

This will output:

{
  name: "John Doe",
  age: "30",
  hobbies: ["reading", "cycling"]
}