@knighted/display-name

A codemod to add displayName to React function components.

• Works with TypeScript or JavaScript source code.
• Quickly fix react/display-name lint errors.
• Pass a path to a file, or a string.

Example

import { modify } from '@knighted/display-name'

const codemod = await modify(`
  import { memo } from 'react'

  const Foo = () => {
    return <div>foo</div>
  }

  const Bar = function Bar(props) {
    return <span>stuff</span>
  }

  const Baz = memo(() => {
    return <p>baz</p>
  })
`)

console.log(codemod)

/*
import { memo } from 'react'

const Foo = () => {
  return <div>foo</div>
}
Foo.displayName = 'Foo';

const Bar = function Bar(props) {
  return <span>bar</span>
}

const Baz = memo(() => {
  return <p>baz</p>
})
Baz.displayName = 'Baz';
*/

You can also pass a filepath instead of a string:

import { modifyFile } from '@knighted/display-name'

await modifyFile('/path/to/file.tsx')