eslint-plugin-react
eslint-plugin-react copied to clipboard
[New]: `jsx-no-literals`: add restrictedAttributes option
Add restrictedAttributes option to jsx-no-literals rule
Summary
This PR introduces a new restrictedAttributes option for the jsx-no-literals rule. With this option, you can enforce translation (i18n) only for certain attributes, while other attributes can still use string literals freely.
Note: If
noAttributeStrings: trueis also set, the root-levelrestrictedAttributeswill be ignored.
This implementation addresses the main requirements discussed in issue #3003, though it takes a slightly different approach from some of the ideas mentioned there.
Usage Examples
Basic usage – restrict specific attributes globally
{
"react/jsx-no-literals": [
"error",
{
"restrictedAttributes": ["title", "alt", "aria-label", "placeholder"]
}
]
}
// ❌ Error: Restricted attribute string: "Click me" in title
<button title="Click me">Save</button>
// ✅ OK: className is not in restrictedAttributes
<button className="primary">Save</button>
Component-specific restrictions
{
"react/jsx-no-literals": [
"error",
{
"elementOverrides": {
"Input": { "restrictedAttributes": ["placeholder", "aria-label"] },
"Button": { "restrictedAttributes": ["title", "aria-label"] }
}
}
]
}
// ❌ Error: Restricted attribute string: "Enter name" in placeholder of Input
<Input placeholder="Enter name" />
// ✅ OK: type is not restricted for Button component
<Button type="submit">Submit</Button>