Skip to content

Commit

Permalink
Adds new unused-prop-types rule
Browse files Browse the repository at this point in the history
  • Loading branch information
Evgueni Naverniouk authored and Evgueni Naverniouk committed Jul 26, 2016
1 parent 8b8eba7 commit e2dbee2
Show file tree
Hide file tree
Showing 5 changed files with 2,917 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ Finally, enable all of the rules that you would like to use. Use [our preset](#
* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
* [react/sort-comp](docs/rules/sort-comp.md): Enforce component methods order
* [react/sort-prop-types](docs/rules/sort-prop-types.md): Enforce propTypes declarations alphabetical sorting
* [react/unused-prop-types](docs/rules/unused-prop-types.md): Prevent definitions of unused prop types

## JSX-specific rules

Expand Down
70 changes: 70 additions & 0 deletions docs/rules/unused-prop-types.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Prevent definitions of unused prop types (unused-prop-types)

Warns you if you have defined a prop type but it is never being used anywhere.

## Rule Details

The following patterns are considered warnings:

```jsx
var Hello = React.createClass({
propTypes: {
name: React.PropTypes.string
},
render: function() {
return <div>Hello Bob</div>;
}
});

var Hello = React.createClass({
propTypes: {
firstname: React.PropTypes.string.isRequired,
middlename: React.PropTypes.string.isRequired, // middlename is never used below
lastname: React.PropTypes.string.isRequired
},
render: function() {
return <div>Hello {this.props.firstname} {this.props.lastname}</div>;
}
});

function Hello({ name }) {
return <div>Hello Jeremy</div>;
}
```

The following patterns are not considered warnings:

```jsx
var Hello = React.createClass({
propTypes: {
name: React.PropTypes.string
},
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
```

## Rule Options

This rule can take one argument to ignore some specific props during validation.

```
...
"prop-types": [<enabled>, { customValidators: <customValidator> }]
...
```

* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
* `customValidators`: optional array of validators used for propTypes validation.
* `skipShapeProps`: In some cases it is impossible to accurately detect whether or not a shape PropType's values are being used. Setting this option to true will skip validation of shape PropTypes.

## About component detection

For this rule to work we need to detect React components, this could be very hard since components could be declared in a lot of ways.

For now we should detect components created with:

* `React.createClass()`
* an ES6 class that inherit from `React.Component` or `Component`
* a stateless function that return JSX or the result of a `React.createElement` call.
3 changes: 2 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ var rules = {
'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
'jsx-filename-extension': require('./lib/rules/jsx-filename-extension'),
'require-optimization': require('./lib/rules/require-optimization'),
'no-find-dom-node': require('./lib/rules/no-find-dom-node')
'no-find-dom-node': require('./lib/rules/no-find-dom-node'),
'unused-prop-types': require('./lib/rules/unused-prop-types')
};

var ruleNames = Object.keys(rules);
Expand Down
Loading

0 comments on commit e2dbee2

Please sign in to comment.