react/no-unknown-property Restriction

🚧 An auto-fix is still under development.

What it does

Disallow usage of unknown DOM properties.

Why is this bad?

You can use unknown property name that has no effect.

Examples

Examples of incorrect code for this rule:

// Unknown properties
const Hello = <div class="hello">Hello World</div>;
const Alphabet = <div abc="something">Alphabet</div>;

// Invalid aria-* attribute
const IconButton = <div aria-foo="bar" />;

Examples of correct code for this rule:

// Unknown properties
const Hello = <div className="hello">Hello World</div>;
const Alphabet = <div>Alphabet</div>;

// Invalid aria-* attribute
const IconButton = <div aria-label="bar" />;

Configuration

This rule accepts a configuration object with the following properties:

ignore

type: string[]

default: []

List of properties to ignore.

requireDataLowercase

type: boolean

default: false

Require data-* attributes to be lowercase, e.g. data-foobar instead of data-fooBar.

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/no-unknown-property --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-unknown-property": "error"
  }
}

References

• Rule Source