id-name

Enforces identifier names assigned from 'useId' calls to be either 'id' or end with 'Id'.

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/id-name

@eslint-react/naming-convention-id-name

Presets

naming-convention recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Enforces identifier names assigned from useId calls to be either id or end with Id.

// Problem: A variable assigned from `useId()` must be named 'id' or end with 'Id'.
const value = useId();

// Problem: A variable assigned from `useId()` must be named 'id' or end with 'Id'.
const unique = useId();

// Problem: A variable assigned from `useId()` must be named 'id' or end with 'Id'.
const foo = useId();

// Problem: Suffix must be exactly 'Id' (case-sensitive)
const myID = useId();

// Problem: A variable assigned from `useId()` must be named 'id' or end with 'Id'.
obj.nested.value = useId();

// Recommended: Simple 'id' name
const id = useId();

// Recommended: Descriptive name ending with 'Id'
const inputId = useId();

// Recommended: Descriptive name ending with 'Id'
const dialogTitleId = useId();

// Recommended: Descriptive name ending with 'Id' (MemberExpression)
obj.nested.myId = useId();

// OK: Not assigned to an identifier or member expression, so there is no name to validate
export default useId();

// OK: The call sits inside an array literal, so it is not directly assigned to a checkable name
const [value] = [useId()];