Add className

Adds className prop to a component and applies it to its root JSX element. Uses classNames if necessary.

How it works

  • Adds prop-types import statement (if not present)
  • Adds propTypes definition to the component (if not present)
  • Adds className to propTypes definition (if not present)
  • If propTypes were sorted, sorting will be kept. If not, new className will be added at the end.
  • Declares className in render body or functional component arguments (if not present)
  • If className was declared in already existing destructuring statement, identifiers in that statement will be sorted
  • Uses className on root JSX element (if not present)
  • If root JSX element already has className defined its value will be preserved by applying classNames function
  • Adds classnames import statement if necessary

Works with

  • Functional components defined as an arrow function
  • Functional components defined as a function
  • Class components
  • Higher order functional components defined as an arrow function
  • Higher order functional components defined as a function
  • Higher order class components

Packages

  • react
  • prop-types
  • classnames

Examples

© 2018 - 2019 Kamil Mielnik & Yuriy Yakym. All rights reserved.