AbsoluteJS

absolute/spring-naming-convention

Enforce correct naming for useSpring and useSprings hook destructuring (<base>Springs / <base>Api).

react-springProblem
View on GitHub

#Rule Details

Enforces a consistent naming convention for useSpring and useSprings array destructuring so spring identity is obvious at every call site. The first variable must end with Springs (with a non-empty base), and the second must be the matching <base>Api.

For the plural useSprings, the base must itself be plural (end in s), giving pairs like itemsSprings / itemsApi. Single-element destructuring, non-array destructuring, and non-spring hooks are ignored.

#Examples

Incorrect
TS
const [fade, fadeApi] = useSpring(() => ({}));          // firstMustEndWithSprings
const [fadeSprings, controller] = useSpring(() => ({})); // secondMustMatch → fadeApi
const [itemSprings, itemApi] = useSprings(3, () => ({})); // pluralRequired → itemsSprings
Correct

Correct Springs / Api naming

TS
const [fadeSprings, fadeApi] = useSpring(() => ({ opacity: 0 }));
const [itemsSprings, itemsApi] = useSprings(3, () => ({ x: 0 }));
TS
const [count, setCount] = useState(0); // non-spring hooks are ignored
const springs = useSpring(() => ({}));  // no array destructuring

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/spring-naming-convention': 'error'
	}
}

#When Not To Use It

If a project does not use react-spring, or follows a different established naming scheme for animation state, this rule does not apply — leave it off.

#Resources