https://github.com/knightedcodemonkey/display-name
Codemod to add a React displayName to function components.
https://github.com/knightedcodemonkey/display-name
codemod displayname function-component react
Last synced: about 1 month ago
JSON representation
Codemod to add a React displayName to function components.
- Host: GitHub
- URL: https://github.com/knightedcodemonkey/display-name
- Owner: knightedcodemonkey
- License: mit
- Created: 2025-05-07T02:25:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-05-11T23:12:04.000Z (11 months ago)
- Last Synced: 2025-09-30T06:44:48.590Z (6 months ago)
- Topics: codemod, displayname, function-component, react
- Language: TypeScript
- Homepage:
- Size: 153 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [`@knighted/display-name`](https://www.npmjs.com/package/@knighted/display-name)
[](https://codecov.io/gh/knightedcodemonkey/display-name)
[](https://www.npmjs.com/package/@knighted/display-name)
A codemod to add `displayName` to React function components.
- Works with TypeScript or JavaScript source code.
- Quickly fix [`react/display-name`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) lint errors.
- Use `displayName` or a named function expression.
- Pass a path to a file, or a string.
## Example
Given
```tsx
import React, { memo } from 'react'
const Foo = memo(({ a }) => {
return <>{a}>
})
const Bar = React.forwardRef((props, ref) =>
bar
)
const Baz = memo(
React.forwardRef((props, ref) => {
return baz
}),
)
```
Then running `modify` on the source code (or `modifyFile` on the file path) results in
```tsx
import React, { memo } from 'react'
const Foo = memo(({ a }) => {
return <>{a}>
})
Foo.displayName = 'Foo'
const Bar = React.forwardRef((props, ref) =>
bar
)
Bar.displayName = 'Bar'
const Baz = memo(
React.forwardRef((props, ref) => {
return baz
}),
)
```
If running the codemod against a codebase that has recently added `eslint-plugin-react` you can write a script.
```js
import { globSync } from 'node:fs'
import { writeFile } from 'node:fs/promises'
import { modifyFile } from '@knighted/display-name'
const doCodeMod = async () => {
for (const file of globSync('**/*.tsx', {
exclude: ['**/node_modules/**', '**/dist/**', '**/build/**'],
})) {
await writeFile(file, await modifyFile(file))
}
}
await doCodeMod()
```
Then optionally run the results through a formatter like `prettier`.
## Options
There are some options, none are required. Most notably you can choose a `style` for adding the display name. The default is `displayName` which adds a displayName property to the function component, or you can choose `namedFuncExpr` to use a named function expression instead.
```ts
type Options = {
requirePascal?: boolean
insertSemicolon?: boolean
modifyNestedForwardRef?: boolean
style?: 'displayName' | 'namedFuncExpr'
}
```
For example, using `namedFuncExpr`
```tsx
const Foo = memo(() => <>foo>)
```
becomes
```tsx
const Foo = memo(function Foo() {
return <>foo>
})
```