@frankhoodbs/data-attributes-utils v1.2.3
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"]
}
6 days ago
19 days ago
22 days ago
23 days ago
23 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago