You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -53,7 +53,9 @@ You should also specify settings that will be shared across all the plugin rules
53
53
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
54
54
"forbidExtraProps",
55
55
{"property":"freeze", "object":"Object"},
56
-
{"property":"myFavoriteWrapper"}
56
+
{"property":"myFavoriteWrapper"},
57
+
// for rules that check exact prop wrappers
58
+
{"property":"forbidExtraProps", "exact":true}
57
59
],
58
60
"componentWrapperFunctions": [
59
61
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
Recommends options to ensure only exact prop definitions are used when writing components. This recommends solutions for PropTypes or for Flow types.
4
+
5
+
In React, you can define prop types for components using propTypes. Such an example is below:
6
+
7
+
```jsx
8
+
classFooextendsReact.Component {
9
+
render() {
10
+
return<p>{this.props.bar}</p>;
11
+
}
12
+
}
13
+
14
+
Foo.propTypes= {
15
+
bar:PropTypes.string
16
+
};
17
+
```
18
+
19
+
The problem with this is that the consumer of the component could still pass in extra props. There could even be a typo for expected props. In order to prevent those situations, one could use the npm package [prop-types-exact](https://www.npmjs.com/package/prop-types-exact) to warn when unexpected props are passed to the component.
20
+
21
+
One can also define props for a component using Flow types. Such an example is below:
22
+
23
+
```jsx
24
+
classFooextendsReact.Component {
25
+
props: {
26
+
bar: string
27
+
}
28
+
29
+
render() {
30
+
return<p>{this.props.bar}</p>;
31
+
}
32
+
}
33
+
```
34
+
35
+
In this case, one could instead enforce only the exact props being used by using exact type objects, like below:
36
+
37
+
```jsx
38
+
classFooextendsReact.Component {
39
+
props: {|
40
+
bar: string
41
+
}|
42
+
43
+
render() {
44
+
return<p>{this.props.bar}</p>;
45
+
}
46
+
}
47
+
```
48
+
49
+
See the [Flow docs](https://flow.org/en/docs/types/objects/#toc-exact-object-types) on exact object types for more information.
50
+
51
+
## Rule Details
52
+
53
+
This rule will only produce errors for prop types when combined with the appropriate entries in `propWrapperFunctions`. For example:
54
+
55
+
```json
56
+
{
57
+
"settings": {
58
+
"propWrapperFunctions": [
59
+
{"property": "exact", "exact": true}
60
+
]
61
+
}
62
+
}
63
+
```
64
+
65
+
The following patterns are considered warnings:
66
+
67
+
```jsx
68
+
classComponentextendsReact.Component {
69
+
render() {
70
+
return<div />;
71
+
}
72
+
}
73
+
Component.propTypes= {
74
+
foo:PropTypes.string
75
+
};
76
+
```
77
+
78
+
```jsx
79
+
classComponentextendsReact.Component {
80
+
static propTypes = {
81
+
foo:PropTypes.string
82
+
}
83
+
render() {
84
+
return<div />;
85
+
}
86
+
}
87
+
```
88
+
89
+
```jsx
90
+
classComponentextendsReact.Component {
91
+
props: {
92
+
foo: string
93
+
}
94
+
render() {
95
+
return<div />;
96
+
}
97
+
}
98
+
```
99
+
100
+
```jsx
101
+
functionComponent(props: { foo: string }) {
102
+
return<div />;
103
+
}
104
+
```
105
+
106
+
```jsx
107
+
type Props = {
108
+
foo: string
109
+
}
110
+
functionComponent(props:Props) {
111
+
return<div />;
112
+
}
113
+
```
114
+
115
+
The following patterns are **not** considered warnings:
116
+
117
+
```jsx
118
+
type Props = {|
119
+
foo: string
120
+
|}
121
+
functionComponent(props:Props) {
122
+
return<div />;
123
+
}
124
+
```
125
+
126
+
```jsx
127
+
importexactfrom'prop-types-exact';
128
+
classComponentextendsReact.Component {
129
+
render() {
130
+
return<div />;
131
+
}
132
+
}
133
+
Component.propTypes=exact({
134
+
foo:PropTypes.string
135
+
});
136
+
```
137
+
138
+
## When Not To Use It
139
+
140
+
If you aren't concerned about extra props being passed to a component or potential spelling errors for existing props aren't a common nuisance, then you can leave this rule off.
0 commit comments