# typescript-react-intl

> Extracts string messages from TypeScript React components or ts files that use React Intl.

Latest version **0.4.1** (published 2019-12-16) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 25/100 (F)** — status: abandoned.

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2019-12-16 |
| First published | 2016-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 52 |
| Author | bang88 |
| Maintainers | bang88 |
| Keywords | react intl typescript |

## Links

- npm: https://www.npmjs.com/package/typescript-react-intl
- Repository: https://github.com/bang88/typescript-react-intl
- Homepage: https://github.com/bang88/typescript-react-intl#readme
- Issues: https://github.com/bang88/typescript-react-intl/issues
- npm.io page: https://npm.io/package/typescript-react-intl

## Dependencies (1)

- [typescript](https://npm.io/package/typescript.md) ^2.6.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2019-12-16
- 0.4.0 — 2019-06-19
- 0.3.0 — 2018-10-22
- 0.2.5 — 2018-07-07
- 0.2.4 — 2018-06-02
- 0.2.3 — 2018-05-15
- 0.2.2 — 2018-05-15
- 0.2.1 — 2018-01-13
- 0.2.0 — 2018-01-11
- 0.1.7 — 2017-06-10
- 0.1.6 — 2017-04-02
- 0.1.5 — 2017-03-17
- 0.1.4 — 2017-02-14
- 0.1.3 — 2016-12-27
- 0.1.2 — 2016-12-05
- … 2 more at https://npm.io/package/typescript-react-intl/versions

## README

# typescript-react-intl

Extracts string messages from TypeScript React components or ts files that use React Intl. You can use it in `React Native` too. 

[![Build Status](https://travis-ci.org/bang88/typescript-react-intl.svg?branch=master)](https://travis-ci.org/bang88/typescript-react-intl)

## Usage

> If you have many files to processes,you can get contents use node-glob with fs module
> Custom component support since version `0.3.0`. checkout tests/index.js

```sh
npm i typescript-react-intl -D
```

```js
var parse = require("typescript-react-intl").default;

// results is an array
// contents is your tsx file
var results = parse(contents);

// or if you want support custom components
var results = parse(contents, {
  tagNames: ["MyComponent", "StyledText"],
});
```

### React-intl

Only support `<FormattedMessage/>` and `defineMessages` We don't use `<FormattedHtmlMessage/>`

### Examples

```js
var fs = require("fs");
var glob = require("glob");
var parser = require("typescript-react-intl").default;

function runner(pattern, cb) {
  var results = [];
  pattern = pattern || "src/**/*.@(tsx|ts)";
  glob(pattern, function(err, files) {
    if (err) {
      throw new Error(err);
    }
    files.forEach((f) => {
      var contents = fs.readFileSync(f).toString();
      var res = parser(contents);
      results = results.concat(res);
    });

    cb && cb(results);
  });
}

// demo
runner(null, function(res) {
  var locale = {};

  res.forEach((r) => {
    locale[r.id] = r.defaultMessage;
  });

  var locales = {
    en: locale,
  };

  // save file to disk。you can save as a json file,just change the ext and contents as you want.
  fs.writeFileSync(
    `src/translations/all.ts`,
    `export default ${JSON.stringify(locales, null, 2)}\r`,
  );
});
```

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