https://github.com/correttojs/eslint-plugin-react-hooks-ssr
eslint plugin to forbid globals within the react server side rendering
https://github.com/correttojs/eslint-plugin-react-hooks-ssr
Last synced: about 1 year ago
JSON representation
eslint plugin to forbid globals within the react server side rendering
- Host: GitHub
- URL: https://github.com/correttojs/eslint-plugin-react-hooks-ssr
- Owner: correttojs
- License: mit
- Created: 2020-01-03T08:31:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T19:23:56.000Z (over 3 years ago)
- Last Synced: 2025-05-07T14:24:26.322Z (about 1 year ago)
- Language: JavaScript
- Size: 195 KB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](http://eslint.org):
```
$ 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:
```javascript
{
"plugins": [
"react-hooks-ssr"
]
}
```
Optionally configure the regexp to whitelist globals within certain function declarations (by default the `async` prefix).
```javascript
{
"rules": {
"react-hooks-ssr/react-hooks-global-ssr": ["error", { "allowFuncRegExp": /test/ }]
}
}
```
## Documentation
- a global within `useEffect` is allowed
```javascript
function Component() {
useEffect(() => {
console.log(window.innerWidth);
});
return
Hello;
}
```
- a global within a custom hook (`useXXX`) is allowed
```javascript
function Component() {
useCustomHook(() => {
console.log(window.innerWidth);
});
return
Hello;
}
```
- a global within a function prefixed by `async` (`asyncMyFunc`) is allowed. This pattern can be replaced by the `allowFuncRegExp` option
```javascript
function asyncMyFunction() {
console.log(window.innerWidth);
}
```
- a global within a `useState`, `useReducer` and `useMemo` callback is forbidden
```javascript
function Component() {
const [myState, setMyState] = useState(() => {
return window.innerWidth
});
return
Hello;
}
```
- a global within a React `Component` is forbidden
```javascript
function Component() {
console.log(window.innerWidth)
return
Hello;
}
```