eslint plugin to forbid globals within the react server side rendering
MIT License
This plugin helps you to forbid DOM globals within the react server side rendering.
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.
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/ }]
}
}
useEffect
is allowedfunction Component() {
useEffect(() => {
console.log(window.innerWidth);
});
return <div>Hello</div>;
}
useXXX
) is allowedfunction Component() {
useCustomHook(() => {
console.log(window.innerWidth);
});
return <div>Hello</div>;
}
async
(asyncMyFunc
) is allowed. This pattern can be replaced by the allowFuncRegExp
optionfunction asyncMyFunction() {
console.log(window.innerWidth);
}
useState
, useReducer
and useMemo
callback is forbiddenfunction Component() {
const [myState, setMyState] = useState(() => {
return window.innerWidth
});
return <div>Hello</div>;
}
Component
is forbiddenfunction Component() {
console.log(window.innerWidth)
return <div>Hello</div>;
}