logoESLint React
Rules

ref-name

Full Name in @eslint-react/eslint-plugin

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

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

react-naming-convention/ref-name

Presets

recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Description

Enforces identifier names assigned from useRef calls to be either ref or end with Ref.

Examples

Failing

const count = useRef(0);
//    ^^^^^^^^
//    - A ref identifier must be named 'ref' or ending in 'Ref'.
const input = useRef<HTMLInputElement>(null);
//    ^^^^^
//    - A ref identifier must be named 'ref' or ending in 'Ref'.
const value = useRef(null);
//    ^^^^^
//    - A ref identifier must be named 'ref' or ending in 'Ref'.

Passing

const ref = useRef(0);
const countRef = useRef(0);
const inputRef = useRef<HTMLInputElement>(null);
const valueRef = useRef(null);

Implementation

Further Reading

On this page