no-unknown-property

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-unknown-property

Full Name in eslint-plugin-react-dom

react-dom/no-unknown-property

Features

🔧 ⚙️

Description

Disallows unknown DOM properties.

In JSX, most DOM properties and attributes should be camel-cased to be consistent with standard JavaScript style. This can be a source of error if you are used to writing plain HTML. Only data-* and aria-* attributes use hyphens and lowercase letters in JSX.

Rule Options

...
"react/no-unknown-property": [<enabled>, { ignore: <ignore>, requireDataLowercase: <requireDataLowercase> }]
...

enabled: enables the rule. 0=off, 1=warn, 2=error. Defaults to 0.
ignore: optional array of property and attribute names to ignore during validation.
requireDataLowercase: optional (default: false), requires data-* attributes to contain only lowercase characters. React will issue a warning when data-* attributes contain uppercase characters. To catch such attributes, set the requireDataLowercase option to true.

If you are using a library that passes something as a prop to JSX elements, add those props to the ignored properties.

For example, if you use emotion and its css prop, add the following to your .eslintrc config file:

Configuration Examples

eslint.config.js

// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/dom/no-unknown-property": ['error', { ignore: ['css'] }]
  }
];

Now the following code passes:

const StyledDiv = <div css={{ color: "pink" }}></div>;

Examples

Failing

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

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

Passing

const Hello = <div className="hello">Hello World</div>;
const Button = <button disabled>Cannot click me</button>;
const Img = <img src={catImage} alt="A cat sleeping on a keyboard" />;

// aria-* attributes
const IconButton = <button aria-label="Close" onClick={this.close}>{closeIcon}</button>;

// data-* attributes
const Data = <div data-index={12}>Some data</div>;

// React components are ignored
const MyComponent = <App class="foo-bar" />;
const AnotherComponent = <Foo.bar for="bar" />;

// Custom web components are ignored
const MyElem = <div class="foo" is="my-elem"></div>;
const AtomPanel = <atom-panel class="foo"></atom-panel>;