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: Identifier 'myRef' does not end with 'Id'
const myRef = useId();

// Problem: Identifier 'randomString' does not end with 'Id'
const randomString = useId();

// Recommended: Name ends with 'Id'
const myId = useId();

// Recommended: Name is exactly 'id'
const id = useId();

// OK: Name ends with 'Id' (MemberExpression)
obj.nested.myId = useId();

// OK: Returning the result directly from a custom Hook
function useCustomId() {
  return useId();
}