https://github.com/gstj/safe-jsx
An ESLint plugin that enforces explicit boolean conversion before using the && operator with JSX in React and React Native applications.
https://github.com/gstj/safe-jsx
boolean conversion eslint eslint-plugin javascript jsx linting quality react react-native safe-settings
Last synced: about 2 months ago
JSON representation
An ESLint plugin that enforces explicit boolean conversion before using the && operator with JSX in React and React Native applications.
- Host: GitHub
- URL: https://github.com/gstj/safe-jsx
- Owner: GSTJ
- License: mit
- Created: 2023-05-12T01:10:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T03:33:02.000Z (about 1 year ago)
- Last Synced: 2024-05-02T02:55:14.218Z (about 1 year ago)
- Topics: boolean, conversion, eslint, eslint-plugin, javascript, jsx, linting, quality, react, react-native, safe-settings
- Language: TypeScript
- Homepage: https://github.com/GSTJ/safe-jsx
- Size: 48.8 KB
- Stars: 28
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 🛡️ eslint-plugin-safe-jsx
`eslint-plugin-safe-jsx` is an ESLint plugin that enforces explicit boolean conversion before using the && operator with JSX in React and React Native applications. This plugin improves the reliability of your code by helping prevent certain types of bugs that can break your app.
## 💡 Why Use eslint-plugin-safe-jsx?
In JavaScript, certain "falsy" values such as `0`, `''`, and `null` can lead to unexpected behavior when used in a logical expression. This can be particularly problematic in React JSX code, where you might be expecting a boolean value.
Consider the following example:
```jsx
const myText = 0;
myText && {myText};
```
In this scenario, the code tries to render `0` outside the Text component, leading to a failure. The issue is even more critical when the variable value comes from a server or an external source. This ESLint rule helps prevent such scenarios from occurring.
With `eslint-plugin-safe-jsx`, ESLint will alert you to these potential errors and can even auto-fix them, like so:
```jsx
const myText = 0;
Boolean(myText) && {myText};
```
Now, `myText` is explicitly converted to a boolean before being used in the logical expression, preventing the `0` from being rendered.
For more examples, check out our [test cases](./src/rules/jsx-explicit-boolean.test.tsx).
## 🚀 Installation
You'll first need to install [ESLint](https://eslint.org/docs/latest/user-guide/getting-started):
```sh
# npm
npm install eslint --save-dev
# yarn
yarn add eslint --dev
```
Next, install `eslint-plugin-safe-jsx`:
```sh
# npm
npm install eslint-plugin-safe-jsx --save-dev
# yarn
yarn add eslint-plugin-safe-jsx --dev
```
**Note:** If you installed ESLint globally (using the `-g` flag in npm, or the `global` prefix in yarn) then you must also install `eslint-plugin-safe-jsx` globally.
## ⚙️ Usage
Add `safe-jsx` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
```json
{
"plugins": ["safe-jsx"]
}
```
Then configure the rules you want to use under the rules section.
```json
{
"rules": {
"safe-jsx/jsx-explicit-boolean": "error" // or "warn"
}
}
```
## 📚 Supported Rules
- `jsx-explicit-boolean`: Enforces explicit boolean conversion before using the && operator with JSX.
## 🤝 Contributing
We welcome your contributions! For major changes, please open an issue first to discuss what you would like to change. Don't forget to update tests as appropriate.
## 📃 License
[MIT](./LICENSE)