react/no-unknown-property Restriction

💡 A suggestion is available for this rule.

What it does

Disallow usage of unknown DOM properties.

Why is this bad?

DOM properties should only be used if they are valid for a given HTML element.

Examples

Examples of incorrect code for this rule:

jsx

// 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:

jsx

// 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 using the config file or in the CLI, you can use:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

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

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-unknown-property": "error",
  },
});

bash

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

Version

This rule was added in v0.2.0.

What it does ​

Why is this bad? ​

Examples ​

Configuration ​

ignore ​

requireDataLowercase ​

How to use ​

Version ​

References ​