@lilith/eslint-config-react

ESLint configuration for React applications with TypeScript and accessibility support.

Features

• Extends @lilith/eslint-config-base
• React Hooks rules (eslint-plugin-react-hooks)
• JSX accessibility rules (eslint-plugin-jsx-a11y)
• React best practices (eslint-plugin-react)
• TypeScript JSX support

Installation

pnpm add -D @lilith/eslint-config-react

Peer Dependencies

pnpm add -D \
  eslint \
  typescript \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-plugin-import \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  @lilith/eslint-config-base

Usage

// .eslintrc.cjs
module.exports = {
  extends: ['@lilith/eslint-config-react'],
  parserOptions: {
    project: './tsconfig.json',
  },
};

Or use directly:

// .eslintrc.cjs
module.exports = require('@lilith/eslint-config-react');

React-Specific Rules

React Hooks

// Enforced: exhaustive-deps
useEffect(() => {
  doSomething(value);
}, [value]); // Must include all dependencies

// Enforced: rules-of-hooks
// Hooks only at top level of components/hooks

Accessibility (a11y)

// Enforced: alt text for images
<img src="photo.jpg" alt="Description" />

// Enforced: interactive elements keyboard accessible
<button onClick={handleClick}>Click me</button>

// Enforced: valid ARIA attributes
<div role="button" aria-pressed="false">Toggle</div>

React Best Practices

• No array index as key
• No direct state mutation
• Consistent component patterns
• PropTypes/TypeScript for type checking

Recommended tsconfig.json

{
  "extends": "@lilith/configs/typescript/react",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Related Packages

• @lilith/eslint-config-base - Base configuration
• @lilith/eslint-config-nestjs - NestJS configuration
• @lilith/configs - Unified configuration package

License

MIT