Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
6 contributors

Users who have contributed to this file

@bmish @yannickcr @ljharb @felicio @DianaSuvorova @bsonntag

Disallow common typos (react/no-typos)

Ensure no casing typos were made declaring static class properties and lifecycle methods. Checks that declared propTypes, contextTypes and childContextTypes is supported by react-props

Rule Details

This rule checks whether the declared static class properties and lifecycle methods related to React components do not contain any typos.

It makes sure that the following class properties have no casing typos:

  • propTypes
  • contextTypes
  • childContextTypes
  • defaultProps

and the following react lifecycle methods:

  • getDerivedStateFromProps
  • componentWillMount
  • UNSAFE_componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • UNSAFE_componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • UNSAFE_componentWillUpdate
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • componentDidCatch
  • componentWillUnmount
  • render

Examples of incorrect code for this rule:

class MyComponent extends React.Component {
  static PropTypes = {}
}

class MyComponent extends React.Component {
  static proptypes = {}
}

class MyComponent extends React.Component {
  static ContextTypes = {}
}

class MyComponent extends React.Component {
  static contexttypes = {}
}

class MyComponent extends React.Component {
  static ChildContextTypes = {}
}

class MyComponent extends React.Component {
  static childcontexttypes = {}
}

class MyComponent extends React.Component {
  static DefaultProps = {}
}

class MyComponent extends React.Component {
  static defaultprops = {}
}

class MyComponent extends React.Component {
  componentwillMount() {}
}

class MyComponent extends React.Component {
  ComponentWillReceiveProps() {}
}

class MyComponent extends React.Component {
  componentdidupdate() {}
}

class MyComponent extends React.Component {
  static propTypes = {
    a: PropTypes.typo
  }
}

class MyComponent extends React.Component {
  getDerivedStateFromProps() {}
}

Examples of correct code for this rule:

class MyComponent extends React.Component {
  static propTypes = {}
}

class MyComponent extends React.Component {
  static contextTypes = {}
}

class MyComponent extends React.Component {
  static childContextTypes = {}
}

class MyComponent extends React.Component {
  static defaultProps = {}
}

class MyComponent extends React.Component {
  componentWillMount() {}
}

class MyComponent extends React.Component {
  componentWillReceiveProps() {}
}

class MyComponent extends React.Component {
  componentDidUpdate() {}
}

class MyComponent extends React.Component {
  static propTypes = {
    a: PropTypes.bool.isRequired
  }
}