# react-refresh-typescript

> React Refresh transformer for TypeScript

Latest version **2.0.12** (published 2026-03-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-refresh-typescript
pnpm add react-refresh-typescript
yarn add react-refresh-typescript
bun add react-refresh-typescript
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2026-03-27 |
| First published | 2020-10-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 86.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 69 |
| Author | Jack Works |
| Maintainers | jackworks |
| Keywords | react, refresh, transformer, typescript |

## Links

- npm: https://www.npmjs.com/package/react-refresh-typescript
- Repository: https://github.com/Jack-Works/react-refresh-transformer
- Homepage: https://github.com/Jack-Works/react-refresh-transformer#readme
- Issues: https://github.com/Jack-Works/react-refresh-transformer/issues
- npm.io page: https://npm.io/package/react-refresh-typescript

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.12 (latest) — 2026-03-27
- 2.0.11 — 2025-10-06
- 2.0.10 — 2024-12-24
- 2.0.9 — 2023-04-08
- 2.0.8 — 2023-02-16
- 2.0.7 — 2022-07-05
- 2.0.6 — 2022-07-04
- 2.0.5 — 2022-05-27
- 2.0.4 — 2022-03-29
- 2.0.3 — 2021-11-28
- 2.0.2 — 2021-07-12
- 2.0.1 — 2021-05-22
- 2.0.0 — 2021-04-10
- 1.1.1 — 2021-01-16
- 1.1.0 — 2020-11-07
- … 5 more at https://npm.io/package/react-refresh-typescript/versions

## README

# react-refresh-typescript

This package is under on-demand maintenance. I'll update it with upstream if someone opens an issue.

This package currently matches the upstream runtime of [`react-refresh@0.19.*`](https://github.com/facebook/react/commit/1be3ce9996f05ceb74fd8c11f08a84a5e57098f3) (Mon Oct 6 01:13:22 2025 +0200) (React 19). Please open an issue if you need this but the matching commit is too old.

This package implements the plugin to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state.

This package is primarily aimed at developers of bundler plugins. If you’re working on one, here is [a rough guide](https://github.com/facebook/react/issues/16604#issuecomment-528663101) for Fast Refresh integration using this package.

## Minimal requirement

-   TypeScript 4.0
-   `module` (not `target`) set to `es2015` or later (not work with `CommonJS` currently. If you really need it, please vote in [#3](https://github.com/Jack-Works/react-refresh-transformer/issues/3))

## Example (with ts-loader)

```js
{
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
        getCustomTransformers: () => ({
            before: [require('react-refresh-typescript')()]
        }),
    }
}
```

## Example (with raw TypeScript transpileModule API)

```js
import refresh from 'react-refresh-typescript';
import ts from 'typescript';
const out = ts.transpileModule('const App = () => <Something />', {
    compilerOptions: {
        target: ts.ScriptTarget.ESNext,
        jsx: ts.JsxEmit.Preserve,
    },
    fileName: 'test.jsx',
    transformers: {before: [refresh(options)]},
}).outputText,
```

## Import from Deno

The entry point is [`src/deno.ts`](https://raw.githubusercontent.com/Jack-Works/react-refresh-transformer/main/typescript/src/deno.ts).

You must have [an import map for deno](https://deno.land/manual/linking_to_external_code/import_maps) that specify `typescript` as a peer dependency.

For example:

```json
{
    "imports": {
        "typescript": "https://esm.sh/typescript"
    }
}
```

### Without import-map

If you don't want to set up an import map, you can import [the core file](https://cdn.jsdelivr.net/npm/react-refresh-typescript@latest/dist-src/core.js) and provide TypeScript via `options.ts`.

## Options

```ts
export type Options = {
    /** @default "$RefreshReg$" */
    refreshReg?: string
    /** @default "$RefreshSig$" */
    refreshSig?: string
    /** @default false */
    emitFullSignatures?: boolean
    /** Provide your own TypeScript instance. */
    ts?: typeof import('typescript')
    /** Provide your own hash function when `emitFullSignatures` is `false` */
    hashSignature?: (signature: string) => string
}
```

---
_Source: https://npm.io/package/react-refresh-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._