hampusborgos/react-html-id

Provides unique IDs for HTML DOM elements.

react-html-id's Issues

Create typing definition file or as a separate @types module, for TypeScript

I have used this library with React and TypeScript and created this typing definition to not have my compiler complain:

import { Component, ComponentLifecycle } from "react";

export declare function enableUniqueIds(component: Component): void;
export declare function resetUniqueIds(): void;

declare module "react" {
    export interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {
        nextUniqueId(): string;
        lastUniqueId(): string;
        getUniqueId(identifier: string): string;
    }
} 

It is possible another interface would be a better spot for this, however I have used this with React.PureComponent and observed the expected results (i.e. an element had id="id-2-1").

I used it by manually adding the typing definition file to node_modules. Here is a class with this in use TransformedImagesElement/src/components/editor/inputs/SwitchInput.tsx. Manually adding it is not ideal, which leads to two possible solutions:

• Add the typing definition directly to this module
• Add it to @types as a separate module: Contribution guide

Usage for test-id

Can this library help with generating unique test ids, so that we can use that to target specific elements in tests ?

Currently, this is how it seems to work and some issues:

• the order of unique ids generated would be the same, every time you reset. I also suppose that this guarantees the same ids and order if the app is run again, or the page is refreshed?
• It seems that we can get different ids for the same component if the code is executed in a way that the order of loading that component differs ( for example, it would probably be affected by conditional rendering)
• this only happens at runtime, but is there a way to expose all these generated ids somehow as a map in json, so that the file can then be used in the testing framework.

Feature request: semantic ids

It would be nice to be able to do something like:

uniqueId.enableUniqueIds(this, {
  prefix: "checkbox"
});

So, that the first instance id of that type would be checkbox-1, the second instance id of that type would be checkbox-2, and so on...

Using this with stateless functional components

Is there a way to use this with stateless functional components?

Stop using legacy lifecycle method "componentWillUpdate"

It looks like this library uses the lifecycle method "componentWillUpdate" which is deprecated in React 16.3 and will be removed in the future.

I'm not sure what we can use as an alternative, maybe switching to the UNSAFE variant for now?