Skip to content

Commit

Permalink
Document that prop-types accepts static types, too
Browse files Browse the repository at this point in the history
  • Loading branch information
silvenon committed Jan 18, 2020
1 parent 932d947 commit 1ed251f
Showing 1 changed file with 38 additions and 6 deletions.
44 changes: 38 additions & 6 deletions 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

Expand Down Expand Up @@ -36,6 +39,18 @@ Hello.propTypes = {
}
```

In TypeScript:

```tsx
interface Props = {
age: number
}
function Hello({ name }: Props) {
return <div>Hello {name}</div>;
// 'name' type is missing in props validation
}
```

Examples of correct usage without warnings:

```jsx
Expand Down Expand Up @@ -76,6 +91,19 @@ class HelloEs6WithPublicClassField extends React.Component {
}
```

In Flow:

```tsx
type Props = {
name: string
}
class Hello extends React.Component<Props> {
render() {
return <div>Hello {this.props.name}</div>;
}
}
```

The following patterns are **not** considered warnings:

```jsx
Expand Down Expand Up @@ -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.

Expand All @@ -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/

0 comments on commit 1ed251f

Please sign in to comment.