Skip to content

Commit

Permalink
Add new rule 'no-invalid-default-props'
Browse files Browse the repository at this point in the history
  • Loading branch information
Roy Sutton committed Feb 23, 2017
1 parent 8148833 commit 09a65af
Show file tree
Hide file tree
Showing 4 changed files with 2,269 additions and 0 deletions.
192 changes: 192 additions & 0 deletions docs/rules/no-invalid-default-props.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
# Enforce all defaultProps have a corresponding non-required PropType (no-invalid-default-props)

This rule aims to ensure that any `defaultProp` has a non-required `PropType` declaration.

Having `defaultProps` for non-existent `propTypes` is likely the result of errors in refactoring
or a sign of a missing `propType`. Having a `defaultProp` for a required property similarly
indicates a possible refactoring problem.

## Rule Details

The following patterns are considered warnings:

```jsx
function MyStatelessComponent({ foo, bar }) {
return <div>{foo}{bar}</div>;
}

MyStatelessComponent.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string
};

MyStatelessComponent.defaultProps = {
foo: "foo"
};
```

```jsx
var Greeting = React.createClass({
render: function() {
return <div>Hello {this.props.foo} {this.props.bar}</div>;
},

propTypes: {
foo: React.PropTypes.string,
bar: React.PropTypes.string
},

getDefaultProps: function() {
return {
baz: "baz"
};
}
});
```

```jsx
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.foo} {this.props.bar}</h1>
);
}
}

Greeting.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string
};

Greeting.defaultProps = {
foo: "foo"
};
```

```jsx
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.foo} {this.props.bar}</h1>
);
}

static propTypes = {
foo: React.PropTypes.string,
bar: React.PropTypes.string.isRequired
};

static defaultProps = {
baz: "baz"
};
}
```

```jsx
type Props = {
foo: string,
bar?: string
};

function MyStatelessComponent(props: Props) {
return <div>Hello {props.foo} {props.bar}</div>;
}

MyStatelessComponent.defaultProps = {
foo: "foo",
bar: "bar"
}
```

The following patterns are not considered warnings:

```jsx
function MyStatelessComponent({ foo, bar }) {
return <div>{foo}{bar}</div>;
}

MyStatelessComponent.propTypes = {
foo: React.PropTypes.string,
bar: React.PropTypes.string.isRequired
};
```

```jsx
function MyStatelessComponent({ foo, bar }) {
return <div>{foo}{bar}</div>;
}

MyStatelessComponent.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string
};

MyStatelessComponent.defaultProps = {
bar: 'some default'
};
```

```jsx
type Props = {
foo: string,
bar?: string
};

function MyStatelessComponent(props: Props) {
return <div>Hello {props.foo} {props.bar}</div>;
}

MyStatelessComponent.defaultProps = {
bar: 'some default'
};
```

```js
function NotAComponent({ foo, bar }) {}

NotAComponent.propTypes = {
foo: React.PropTypes.string,
bar: React.PropTypes.string.isRequired
};
```

## Rule Options

```js
...
"no-invalid-default-props": [<enabled>, { "allowRequiredDefaults": <boolean> }]
...
```

### `allowRequiredDefaults`

When `true` the rule will ignore `defaultProps` for `isRequired` `propTypes`.

The following patterns are considered okay and do not cause warnings:

```jsx
function MyStatelessComponent({ foo, bar }) {
return <div>{foo}{bar}</div>;
}

MyStatelessComponent.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string
};

MyStatelessComponent.defaultProps = {
foo: "foo"
};
```

## When Not To Use It

If you don't care about stray `defaultsProps` in your components, you can disable this rule.

## Related rules

- [require-default-props](./require-default-props.md)

# Resources
- [Official React documentation on defaultProps](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values)

1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ var allRules = {
'jsx-no-bind': require('./lib/rules/jsx-no-bind'),
'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
'no-unknown-property': require('./lib/rules/no-unknown-property'),
'no-invalid-default-props': require('./lib/rules/no-invalid-default-props'),
'jsx-curly-spacing': require('./lib/rules/jsx-curly-spacing'),
'jsx-equals-spacing': require('./lib/rules/jsx-equals-spacing'),
'jsx-sort-props': require('./lib/rules/jsx-sort-props'),
Expand Down
Loading

0 comments on commit 09a65af

Please sign in to comment.