diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forbidden-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-forbidden-props.md new file mode 100644 index 0000000000..815bb886e3 --- /dev/null +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forbidden-props.md @@ -0,0 +1,205 @@ +--- +title: no-forbidden-props +--- + +**Full Name in `eslint-plugin-react-x`** + +```sh copy +react-x/no-forbidden-props +``` + +**Full Name in `@eslint-react/eslint-plugin`** + +```sh copy +@eslint-react/no-forbidden-props +``` + +**Presets** + +None + +## Description + +Disallow certain props on components. This rule helps enforce consistent prop naming conventions and prevents the use of specific props that may be problematic or against your team's coding standards. + +By default, this rule forbids snake_case props (props containing underscores) to encourage camelCase naming conventions. + +## Options + +The rule accepts an object with the following properties: + +- `forbid` (array): An array of forbidden prop configurations. Each item can be: + - A string: The exact prop name to forbid + - An object with `prop` and optional `excludedNodes` or `includedNodes`: + - `prop` (string): The prop name or regex pattern to forbid + - `excludedNodes` (array): Component names where this prop is allowed + - `includedNodes` (array): Component names where this prop is forbidden (others are allowed) + +### Default Configuration + +```json +{ + "forbid": [{ "prop": "/_/" }] +} +``` + +This default configuration forbids any prop containing an underscore (snake_case). + +## Examples + +### Default Behavior (Forbids snake_case props) + +#### Failing + +```tsx +
+ + +``` + +#### Passing + +```tsx +
+ + +``` + +### Custom Forbidden Props + +Configuration: + +```json +{ + "forbid": ["className", "style"] +} +``` + +#### Failing + +```tsx +
+ +``` + +#### Passing + +```tsx +
+ +``` + +### Regex Patterns + +Configuration: + +```json +{ + "forbid": [ + { "prop": "/^data-/" }, + { "prop": "/^aria-/" } + ] +} +``` + +#### Failing + +```tsx +
+
+
+``` + +#### Passing + +```tsx +
+
+``` + +### Node-Specific Exclusions + +Configuration: + +```json +{ + "forbid": [ + { + "prop": "/_/", + "excludedNodes": ["Button"] + } + ] +} +``` + +#### Failing + +```tsx +
+ +``` + +#### Passing + +```tsx +