Skip to content

Prevent boolean expressions from adding unwanted falsy numbers to your JSX

License

Notifications You must be signed in to change notification settings

gkiely/eslint-plugin-jsx-no-leaked-values

Repository files navigation

eslint-plugin-jsx-no-leaked-values

Avoid accidentally rendering 0 or NaN. Requires @typescript-eslint/parser.

Examples

function MyComponent() {
  return (
    <div>
      {0 && <ComponentX /> /* error */}
      {NaN && <ComponentX /> /* error */}
      {undefined && <ComponentX /> /* no error */}
      {null && <ComponentX /> /* no error */}
      {'' && <ComponentX /> /* no error */}
      {false && <ComponentX /> /* no error */}
    </div>
  );
}

Installation

npm i -D eslint-plugin-jsx-no-leaked-values

Usage

Install and enable typescript-eslint with type linting, see:

npm install -D @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest eslint@latest typescript@latest
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": ".",
    "project": ["./tsconfig.json"]
  },
  "plugins": ["@typescript-eslint"],

Configure the plugin in your .eslintrc:

{
  "extends": ["plugin:jsx-no-leaked-values/recommended"]
}

This essentially expands to:

{
  "plugins": ["jsx-no-leaked-values"],
  "rules": {
    "jsx-no-leaked-values/jsx-no-leaked-values": "error"
  }
}

Differences to jsx-no-leaked-render

The jsx-no-leaked-render react plugin reports an error for all uses of && that do not start with Boolean(value) or !!value. This means that all values have to be coerced at the expression as it is not type aware, even booleans!

On my codebase it reported a lint error for almost all uses of && and meant those cases had to be made a ternary or converted via Boolean at the expression.

This plugin uses type information via typescript-eslint to only show an error for number, 0 or NaN.

Seeing as undefined, null and '' do not render on screen, I deemed it unnecessary to report errors for those cases.

Credit

Inspired by:

About

Prevent boolean expressions from adding unwanted falsy numbers to your JSX

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published