no-unknown-property

Prevent unknown DOM properties in JSX. This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

React uses camelCase for DOM attributes and has some renamed attributes (e.g., className instead of class).

Common CorrectionsCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

<div class="container">Content</div>
<label for="input">Label</label>
<input tabindex="1" readonly />
<table cellpadding="5" cellspacing="0"></table>

✅ CorrectCopy Anchor Link

<div className="container">Content</div>
<label htmlFor="input">Label</label>
<input tabIndex={1} readOnly />
<table cellPadding={5} cellSpacing={0}></table>

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-unknown-property': 'error'
  }
}

Related RulesCopy Anchor Link

• no-invalid-html-attribute - Validate attribute values

Further ReadingCopy Anchor Link

• DOM Elements - React docs
• JSX Differences - HTML vs JSX

Known False NegativesCopy Anchor Link

• An attribute name React does not know at all (<div foo="x">) is not reported unless it is the HTML spelling of a React property: React 16+ passes unknown attributes through to the DOM.
• Namespaced names (xlink:href) are not checked.
• Components and custom elements (<my-widget>) take any prop and are never checked.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-unknown-property": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-unknown-property': 'error',    },  },});