diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md index 88edd81e16..fd1e80295e 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -1,8 +1,11 @@ # Prevent missing props validation in a React component definition (react/prop-types) -PropTypes improve the reusability of your component by validating the received data. +Defining types for component props improves reusability of your components by +validating received data. It can warn other developers if they make a mistake while reusing the component with improper data type. -It can warn other developers if they make a mistake while reusing the component with improper data type. +You can provide types either in runtime types using [PropTypes] or statically +using [TypeScript] or [Flow]. This rule will validate your prop types regardless +of how you're defining them. ## Rule Details @@ -36,6 +39,18 @@ Hello.propTypes = { } ``` +In TypeScript: + +```tsx +interface Props = { + age: number +} +function Hello({ name }: Props) { + return
Hello {name}
; + // 'name' type is missing in props validation +} +``` + Examples of correct usage without warnings: ```jsx @@ -76,6 +91,19 @@ class HelloEs6WithPublicClassField extends React.Component { } ``` +In Flow: + +```tsx +type Props = { + name: string +} +class Hello extends React.Component { + render() { + return
Hello {this.props.name}
; + } +} +``` + The following patterns are **not** considered warnings: ```jsx @@ -115,11 +143,11 @@ As it aptly noticed in > Why should children be an exception? > Most components don't need `this.props.children`, so that makes it extra important -to document `children` in the propTypes. +to document `children` in the prop types. -Generally, you should use `PropTypes.node` for `children`. It accepts -anything that can be rendered: numbers, strings, elements or an array containing -these types. +Generally, you should use `PropTypes.node` or static type `React.Node` for +`children`. It accepts anything that can be rendered: numbers, strings, elements +or an array containing these types. Since 2.0.0 children is no longer ignored for props validation. @@ -132,3 +160,7 @@ For now we should detect components created with: * a function that return JSX or the result of a `React.createElement` call. * `createReactClass()` * an ES6 class that inherit from `React.Component` or `Component` + +[PropTypes]: https://reactjs.org/docs/typechecking-with-proptypes.html +[TypeScript]: http://www.typescriptlang.org/ +[Flow]: https://flow.org/