ts-transform-react-display-name

Typescript transformer plugin for appending display name property to React Components.

Works with tspc, awesome-typescript-loader, ts-loader, (until typescript comes up with built in support).

Supports

• Arrow function components
• Normal function components
• Forward ref components
• Memoized components
• Return Expression Variations

Usage

Prerequisites

npm install tspc ts-transform-react-display-name -D

TS Config

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "ts-transform-react-display-name",
        "prefix": "YOUR_PREFERRED_PREFIX"
      }
    ]
  }
}

Run

Run tspc instead of tsc. The emitted files should be transformed with display name property

Example

Input

// Component.tsx
import * as React from "react";

export const ArrowComponent = () => {
  const InnerArrowComponent: React.FC = () => <h2></h2>;

  return (
    <>
      <InnerArrowComponent />
      <h1>Hello from typescript transformer</h1>
    </>
  );
};

export const ArrowComponentSpan = () => {
  return <h1>Hello from typescript transformer</h1>;
};

Output

...
ArrowComponent.displayName = "TSTransform_ArrowComponent";
ArrowComponentSpan.displayName = "TSTransform_ArrowComponentSpan";

Contributing

install dependencies:

bun install

To run:

bun run build:examples

To build Library:

bun run build