DocsReferenceHandlersdisplayName

displayNameHandler

Tries to find the name of a react component. It considers these as possible names and will use the first one found in order:

  • The static property displayName in Class components
  • Assignment of the static property displayName on Class or Function components
  • The name of a Function or Class component
  • The variable name that an anonymous Function Component is assigned to

Examples

When the displayNameHandler is active any of these components will result in the output below

component.tsx
export default class extends React.Component {
  static displayName = 'DisplayName';
  render() {
    return <div />;
  }
}
component.tsx
class MyComponent extends React.Component {
  render() {
    return <div />;
  }
}
 
MyComponent.displayName = 'DisplayName';
component.tsx
function MyComponent() {
  return <div />;
}
 
MyComponent.displayName = 'DisplayName';
component.tsx
class DisplayName extends React.Component {
  render() {
    return <div />;
  }
}
component.tsx
function DisplayName() {
  return <div />;
}
component.tsx
const DisplayName = () => <div />;

Output

JSON
[
  {
    "displayName": "DisplayName"
  }
]
defaultPropspropDocblock