{
render() {
return Hello {this.props.firstname} {this.props.lastname}
;
}
}
-
-Hello.propTypes: {
- firstname: PropTypes.string.isRequired,
- middlename: PropTypes.string.isRequired, // middlename is never used above
- lastname: PropTypes.string.isRequired
-},
```
The following patterns are **not** considered warnings:
@@ -114,3 +118,7 @@ AComponent.propTypes = {
bProp: PropTypes.string
};
```
+
+[PropTypes]: https://reactjs.org/docs/typechecking-with-proptypes.html
+[TypeScript]: http://www.typescriptlang.org/
+[Flow]: https://flow.org/
diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md
index 7dea535f04..b0e65baddf 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.
+> **Note**: You can provide types in runtime types using [PropTypes] and/or
+statically using [TypeScript] or [Flow]. This rule will validate your prop types
+regardless of how you define 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/
diff --git a/docs/rules/require-default-props.md b/docs/rules/require-default-props.md
index b4796e7ecd..9cc4322afa 100644
--- a/docs/rules/require-default-props.md
+++ b/docs/rules/require-default-props.md
@@ -1,9 +1,18 @@
# Enforce a defaultProps definition for every prop that is not a required prop (react/require-default-props)
-This rule aims to ensure that any non-required `PropType` declaration of a component has a corresponding `defaultProps` value.
+This rule aims to ensure that any non-required prop types of a component has a
+corresponding `defaultProps` value.
-One advantage of `defaultProps` over custom default logic in your code is that `defaultProps` are resolved by React before the `PropTypes` typechecking happens, so typechecking will also apply to your `defaultProps`.
-The same also holds true for stateless functional components: default function parameters do not behave the same as `defaultProps` and thus using `defaultProps` is still preferred.
+> **Note**: You can provide types in runtime types using [PropTypes] and/or
+statically using [TypeScript] or [Flow]. This rule will validate your prop types
+regardless of how you define them.
+
+One advantage of `defaultProps` over custom default logic in your code is that
+`defaultProps` are resolved by React before the `PropTypes` typechecking
+happens, so typechecking will also apply to your `defaultProps`. The same also
+holds true for stateless functional components: default function parameters do
+not behave the same as `defaultProps` and thus using `defaultProps` is still
+preferred.
To illustrate, consider the following example:
@@ -337,3 +346,7 @@ If you don't care about using `defaultsProps` for your component's props that ar
# Resources
- [Official React documentation on defaultProps](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values)
+
+[PropTypes]: https://reactjs.org/docs/typechecking-with-proptypes.html
+[TypeScript]: http://www.typescriptlang.org/
+[Flow]: https://flow.org/
diff --git a/docs/rules/sort-prop-types.md b/docs/rules/sort-prop-types.md
index 6e19a1751c..2d23824fe0 100644
--- a/docs/rules/sort-prop-types.md
+++ b/docs/rules/sort-prop-types.md
@@ -1,6 +1,6 @@
# Enforce propTypes declarations alphabetical sorting (react/sort-prop-types)
-Some developers prefer to sort propTypes declarations alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
+Some developers prefer to sort prop type declaratioms alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
## Rule Details
@@ -17,16 +17,18 @@ var Component = createReactClass({
},
...
});
-
-class Component extends React.Component {
+```
+```jsx
+type Props = {
+ z: number,
+ a: any,
+ b: string
+}
+class Component extends React.Component {
...
}
-Component.propTypes = {
- z: PropTypes.number,
- a: PropTypes.any,
- b: PropTypes.string
-};
-
+```
+```jsx
class Component extends React.Component {
static propTypes = {
z: PropTypes.any,
@@ -50,16 +52,18 @@ var Component = createReactClass({
},
...
});
-
-class Component extends React.Component {
+```
+```jsx
+type Props = {
+ a: string,
+ b: any,
+ c: string,
+}
+class Component extends React.Component {
...
}
-Component.propTypes = {
- a: PropTypes.string,
- b: PropTypes.any,
- c: PropTypes.string
-};
-
+```
+```jsx
class Component extends React.Component {
static propTypes = {
a: PropTypes.any,