diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md
index 7dea535f04..fd1e80295e 100644
--- a/docs/rules/prop-types.md
+++ b/docs/rules/prop-types.md
@@ -1,37 +1,66 @@
# 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
The following patterns are considered warnings:
```jsx
-var Hello = createReactClass({
- render: function() {
- return
Hello {this.props.name}
;
- }
-});
+function Hello({ name }) {
+ return Hello {name}
;
+ // 'name' is missing in props validation
+}
var Hello = createReactClass({
propTypes: {
firstname: PropTypes.string.isRequired
},
render: function() {
- return Hello {this.props.firstname} {this.props.lastname}
; // lastname type is not defined in propTypes
+ return Hello {this.props.firstname} {this.props.lastname}
;
+ // 'lastname' type is missing in props validation
}
});
-function Hello({ name }) {
+// Or in ES6
+class Hello extends React.Component {
+ render() {
+ return Hello {this.props.firstname} {this.props.lastname}
;
+ // 'lastname' type is missing in props validation
+ }
+}
+Hello.propTypes = {
+ firstname: PropTypes.string.isRequired
+}
+```
+
+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
+function Hello({ name }) {
+ return Hello {name}
;
+}
+Hello.propTypes = {
+ name: PropTypes.string.isRequired
+}
+
var Hello = createReactClass({
propTypes: {
name: PropTypes.string.isRequired,
@@ -62,38 +91,31 @@ class HelloEs6WithPublicClassField extends React.Component {
}
```
-The following patterns are **not** considered warnings:
+In Flow:
-```jsx
-var Hello = createReactClass({
- render: function() {
- return Hello World
;
- }
-});
-
-var Hello = createReactClass({
- propTypes: {
- name: PropTypes.string.isRequired
- },
- render: function() {
+```tsx
+type Props = {
+ name: string
+}
+class Hello extends React.Component {
+ render() {
return Hello {this.props.name}
;
}
-});
+}
+```
-// Referencing an external object disable the rule for the component
-var Hello = createReactClass({
- propTypes: myPropTypes,
- render: function() {
- return Hello {this.props.name}
;
- }
-});
+The following patterns are **not** considered warnings:
+```jsx
+function Hello() {
+ return Hello World
;
+}
+
+// Referencing an external object disable the rule for the component
function Hello({ name }) {
return Hello {name}
;
}
-Hello.propTypes = {
- name: PropTypes.string.isRequired,
-};
+Hello.propTypes = myPropTypes;
```
## Rule Options
@@ -121,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.
@@ -135,6 +157,10 @@ For this rule to work we need to detect React components, this could be very har
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`
-* a stateless function that return JSX or the result of a `React.createElement` call.
+
+[PropTypes]: https://reactjs.org/docs/typechecking-with-proptypes.html
+[TypeScript]: http://www.typescriptlang.org/
+[Flow]: https://flow.org/