# react/forbid-foreign-prop-types

> Disallow reading the `propTypes` of another component

Many production builds strip `propTypes` from components to save bytes. Code that reads `Button.propTypes` then gets `undefined`, so it works in development and breaks in production.

The rule reports every read of a `.propTypes` property, including destructuring it. Assigning to `propTypes` is fine. To share prop types between components, export them as a plain object.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/forbid-foreign-prop-types" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/forbid-foreign-prop-types" = ["error", {
  allowInPropTypes = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
import Button from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...Button.propTypes,
  icon: PropTypes.string,
};
```

{/* bad */}
```js
import Button from "./Button";

const { propTypes } = Button;
```

Not reported:

{/* good */}
```jsx
import Button, { buttonPropTypes } from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...buttonPropTypes,
  icon: PropTypes.string,
};
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `allowInPropTypes` | `false` | Allow the read inside an assignment to `propTypes` or a `propTypes` class field. That code is stripped from the build too. |

{/* good {"options": [{"allowInPropTypes": true}]} */}
```jsx
import Button from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...Button.propTypes,
  icon: PropTypes.string,
};
```

{/* bad {"options": [{"allowInPropTypes": true}]} */}
```js
import Button from "./Button";

const names = Object.keys(Button.propTypes);
```