react/forbid-elements Restriction
What it does
Allows you to configure a list of forbidden elements and to specify their desired replacements.
Why is this bad?
You may want to forbid usage of certain elements in favor of others, e.g. forbid all <div /> and use <Box /> instead.
Examples
Examples of incorrect code for this rule:
jsx
// ["error", { "forbid": ["button"] }]
<button />;
React.createElement("button");
// ["error", { "forbid": ["Modal"] }]
<Modal />;
React.createElement(Modal);
// ["error", { "forbid": ["Namespaced.Element"] }]
<Namespaced.Element />;
React.createElement(Namespaced.Element);
// ["error", { "forbid": [{ "element": "button", "message": "use <Button> instead" }, "input"] }]
<div>
<button />
<input />
</div>;
React.createElement("div", {}, React.createElement("button", {}, React.createElement("input")));Examples of correct code for this rule:
jsx
// ["error", { "forbid": ["button"] }]
<Button />
// ["error", { "forbid": [{ "element": "button" }] }]
<Button />Configuration
This rule accepts a configuration object with the following properties:
forbid
type: array
List of forbidden elements, with optional messages for display with lint violations.
Examples:
["error, { "forbid": ["button"] }]["error, { "forbid": [{ "element": "button", "message": "Use <Button> instead." }] }]["error, { "forbid": [{ "element": "input" }] }]
forbid[n]
type: object | string
A forbidden element, either as a plain element name or with a custom message.
forbid[n].element
type: string
forbid[n].message
type: string
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/forbid-elements": "error"
}
}bash
oxlint --deny react/forbid-elements --react-plugin