use-unique-id-class

This NPM package facilitates the generation of unique IDs and classes for enhanced functionality.

A utility package for React that simplifies the generation of unique IDs and classes. This package provides a function, useUniqueIdAndClass, which allows you to easily add unique IDs and classes to HTML elements. It is particularly useful for scenarios where elements need to have unique identifiers and classes dynamically assignedr.

Installation

npm i use-unique-id-class

Useage

import { useUniqueIdAndClass } from 'use-unique-id-class';

    useUniqueIdAndClass(':not([id])', {
      generateId: true,
      id: 'sounak',  //any name, you can provide
      className: 'sounak',  //any name, you can provide
    });

This example demonstrates how to use the useUniqueIdAndClass function to add a unique ID ('sounak') and class ('sounak') to all elements that do not have an existing ID.

Features

• Dynamically generates unique IDs based on specified options.
• Supports the addition of unique classes to elements.
• Provides a simple and convenient solution for managing unique identifiers and classes in React applications.

Pros

• Simplifies the process of adding unique identifiers and classes to HTML elements.
• Improves code readability and maintainability by encapsulating the logic for ID and class assignment.

Why use use-unique-id-class?

• Ideal for projects where unique identifiers and classes are dynamically assigned to elements.
• Integrates seamlessly with React applications.
• Reduces the boilerplate code associated with manual ID and class management.

Example

<div id="sounak-eId-div-uId-css-1yuhvjn-1">
  <div id="sounak-eId-div-uId-css-vb0vue-grid-root-1">
    <div id="sounak-eId-div-uId-css-1xhj18k-1">
      <div id="sounak-eId-div-uId-css-0-5">
        <button id="sounak-eId-button-uId-css-zw2jop-button-root-button-root-1">
          <!-- Button content 1-->
        </button>
        <button id="sounak-eId-button-uId-css-zw2jop-button-root-button-root-2">
          <!-- Button content 2-->
        </button>
      </div>
    </div>
  </div>
</div>