DocumentationRulesno-unknown-property

no-unknown-property

Full Name in eslint-plugin-react-dom

react-dom/no-unknown-property

Full Name in @eslint-react/eslint-plugin

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

Features

🔍 🔧 ⚙️

Presets

  • dom
  • recommended

What it does

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

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>;

Rule Options

...
"react/no-unknown-property": [<enabled>, { ignore: <ignore>, requireDataLowercase: <requireDataLowercase> }]
...
  • enabled: for enabling 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), require data-* attributes to contain only lowercase characters. React will issue a warning when data-* attributes contain uppercase characters. In order 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, it is recommended to 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:

Rule Options 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>;
no-script-urlno-unsafe-iframe-sandbox