noRestrictedElements

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noRestrictedElements
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as react/forbid-elements

Description

Disallow the use of configured elements.

This rule disallows the use of configured elements. Without elements configured, this rule doesn’t do anything.

This rule is useful in situations where you want to enforce the use of specific components instead of certain HTML or custom elements. For example, in a React project, you might want to ensure that developers use a custom TextField component instead of the native <input> element to maintain consistency and apply custom styling or behavior.

Here are some scenarios where this rule can be beneficial:

Consistency: Ensuring that all input fields use a custom component instead of the native element to maintain a consistent look and feel across the application.
Accessibility: Enforcing the use of custom components that have built-in accessibility features, ensuring that the application is accessible to all users.
Custom Behavior: Requiring the use of components that encapsulate specific business logic or validation, reducing the risk of errors and improving code maintainability.
Styling: Ensuring that all elements adhere to the design system by using custom components that apply consistent styling.

By disallowing certain elements and enforcing the use of custom components, this rule helps maintain code quality and consistency across the codebase.

Options

1
{
2
    "options": {
3
        "elements": {
4
            "input": "input is not allowed, use TextField component instead",
5
            "CustomComponent": "deprecated"
6
        }
7
    }
8
}

Examples

Invalid

Restricting the use of HTML elements:

1
<input />

Restricting the use of custom components:

1
<CustomComponent />

Valid

1
<TextField />

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noRestrictedElements": "error"
6
      }
7
    }
8
  }
9
}