Update typechecking-with-proptypes.md (#9392)
* Update typechecking-with-proptypes.md * Update typechecking-with-proptypes.md * Use consistent style for PropTypes import
Dominic Gannaway committed
Apr 12, 2017 at 00:04 UTC
446f186279f3b5197d098c2f145ca809dd090d24
1 file changed
+34
-28
docs/docs/typechecking-with-proptypes.md
+34
-28
@@ -12,6 +12,8 @@ redirect_from:
12
As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
13
14
```javascript
15
+import PropTypes from 'prop-types';
16
+
17
class Greeting extends React.Component {
18
render() {
19
return (
@@ -21,68 +23,70 @@ class Greeting extends React.Component {
23
}
24
25
Greeting.propTypes = {
24
- name: React.PropTypes.string
26
+ name: PropTypes.string
27
};
28
```
29
28
-`React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `React.PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
30
+`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
31
30
-### React.PropTypes
32
+### PropTypes
33
34
Here is an example documenting the different validators provided:
35
36
```javascript
37
+import PropTypes from 'prop-types';
38
+
39
MyComponent.propTypes = {
40
// You can declare that a prop is a specific JS primitive. By default, these
41
// are all optional.
38
- optionalArray: React.PropTypes.array,
39
- optionalBool: React.PropTypes.bool,
40
- optionalFunc: React.PropTypes.func,
41
- optionalNumber: React.PropTypes.number,
42
- optionalObject: React.PropTypes.object,
43
- optionalString: React.PropTypes.string,
44
- optionalSymbol: React.PropTypes.symbol,
42
+ optionalArray: PropTypes.array,
43
+ optionalBool: PropTypes.bool,
44
+ optionalFunc: PropTypes.func,
45
+ optionalNumber: PropTypes.number,
46
+ optionalObject: PropTypes.object,
47
+ optionalString: PropTypes.string,
48
+ optionalSymbol: PropTypes.symbol,
49
50
// Anything that can be rendered: numbers, strings, elements or an array
51
// (or fragment) containing these types.
48
- optionalNode: React.PropTypes.node,
52
+ optionalNode: PropTypes.node,
53
54
// A React element.
51
- optionalElement: React.PropTypes.element,
55
+ optionalElement: PropTypes.element,
56
57
// You can also declare that a prop is an instance of a class. This uses
58
// JS's instanceof operator.
55
- optionalMessage: React.PropTypes.instanceOf(Message),
59
+ optionalMessage: PropTypes.instanceOf(Message),
60
61
// You can ensure that your prop is limited to specific values by treating
62
// it as an enum.
59
- optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
63
+ optionalEnum: PropTypes.oneOf(['News', 'Photos']),
64
65
// An object that could be one of many types
62
- optionalUnion: React.PropTypes.oneOfType([
63
- React.PropTypes.string,
64
- React.PropTypes.number,
65
- React.PropTypes.instanceOf(Message)
66
+ optionalUnion: PropTypes.oneOfType([
67
+ PropTypes.string,
68
+ PropTypes.number,
69
+ PropTypes.instanceOf(Message)
70
]),
71
72
// An array of a certain type
69
- optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
73
+ optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
74
75
// An object with property values of a certain type
72
- optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
76
+ optionalObjectOf: PropTypes.objectOf(PropTypes.number),
77
78
// An object taking on a particular shape
75
- optionalObjectWithShape: React.PropTypes.shape({
76
- color: React.PropTypes.string,
77
- fontSize: React.PropTypes.number
79
+ optionalObjectWithShape: PropTypes.shape({
80
+ color: PropTypes.string,
81
+ fontSize: PropTypes.number
82
}),
83
84
// You can chain any of the above with `isRequired` to make sure a warning
85
// is shown if the prop isn't provided.
82
- requiredFunc: React.PropTypes.func.isRequired,
86
+ requiredFunc: PropTypes.func.isRequired,
87
88
// A value of any data type
85
- requiredAny: React.PropTypes.any.isRequired,
89
+ requiredAny: PropTypes.any.isRequired,
90
91
// You can also specify a custom validator. It should return an Error
92
// object if the validation fails. Don't `console.warn` or throw, as this
@@ -101,7 +105,7 @@ MyComponent.propTypes = {
105
// will be called for each key in the array or object. The first two
106
// arguments of the validator are the array or object itself, and the
107
// current item's key.
104
- customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
108
+ customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
109
if (!/matchme/.test(propValue[key])) {
110
return new Error(
111
'Invalid prop `' + propFullName + '` supplied to' +
@@ -114,9 +118,11 @@ MyComponent.propTypes = {
118
119
### Requiring Single Child
120
117
-With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children.
121
+With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
122
123
```javascript
124
+import PropTypes from 'prop-types';
125
+
126
class MyComponent extends React.Component {
127
render() {
128
// This must be exactly one element or it will warn.
@@ -130,7 +136,7 @@ class MyComponent extends React.Component {
136
}
137
138
MyComponent.propTypes = {
133
- children: React.PropTypes.element.isRequired
139
+ children: PropTypes.element.isRequired
140
};
141
```
142