# Environment `env.react`

Creates configuration objects with linter rules for ReactJS. Adds the following plugins and their recommended rules:

- [@eslint-react/eslint-plugin](https://eslint-react.xyz/)
- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)
- [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh)
- [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)

## Signature

```ts
function react(options: EnvReactOptions): ConfigArg
```

## Options

| Name | Type | Default | Description |
| - | - | - | - |
| `basePath` | `string` | `'.'` | Path to a sub directory to apply the environment preset to. |
| `files` | `Array<string\|string[]>` | _required_ | Glob patterns for source files to be included. Use embedded arrays for AND patterns. |
| `ignores` | `string[]` | `[]` | Glob patterns for source files matching `files` to be ignored. |
| `rules` | `RulesConfig` | `{}` | Additional linter rules to be added to the configuration. |
| `effectHooks` | `string[]` | `[]` | Additional hooks that will be treated as effect hooks, like 'useEffect'. Used by the rule [`@eslint-react/exhaustive-deps`](https://www.eslint-react.xyz/docs/rules/exhaustive-deps). |
| `stateHooks` | `string[]` | `[]` | Additional hooks that will be treated as state hooks, like 'useState'. Used by the rule [`@eslint-react/set-state-in-effect`](https://www.eslint-react.xyz/docs/rules/set-state-in-effect). |

## Example

```ts
// eslint.config.ts
import { defineConfig, env } from '@open-xchange/linter-presets/eslint'

export default defineConfig(

  // project configuration options
  { /* ... */ },

  // React environment
  env.react({
    files: ['src/**/*.{js,ts}'],
    rules: { /* ... */ },
  }),
)
```