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
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
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4){kind=avatar}
