eslint-plugin-react-hooks-ssr
This plugin helps you to forbid DOM globals within the react server side rendering.
- it doesn't support yet React classes
- it supports react hooks and custom hooks
- it requires some naming conventions to identify other functions where globals may be allowed
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-react-hooks-ssr
:
$ npm install eslint-plugin-react-hooks-ssr --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-react-hooks-ssr
globally.
Usage
Add react-hooks-ssr
to the plugins section of your .eslintrc.js
configuration file. You can omit the eslint-plugin-
prefix:
"plugins": "react-hooks-ssr"
Optionally configure the regexp to whitelist globals within certain function declarations (by default the async
prefix).
"rules": "react-hooks-ssr/react-hooks-global-ssr": "error" "allowFuncRegExp": /test/
Documentation
- a global within
useEffect
is allowed
{ ; return <div>Hello</div>;}
- a global within a custom hook (
useXXX
) is allowed
{ ; return <div>Hello</div>;}
- a global within a function prefixed by
async
(asyncMyFunc
) is allowed. This pattern can be replaced by theallowFuncRegExp
option
{ console;}
- a global within a
useState
,useReducer
anduseMemo
callback is forbidden
{ const myState setMyState = ; return <div>Hello</div>;}
- a global within a React
Component
is forbidden
{ console return <div>Hello</div>;}