# @sonicgarden/copy-tuner-react-intl

> CopyTuner Client for React Intl

Latest version **1.0.0** (published 2021-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sonicgarden/copy-tuner-react-intl
pnpm add @sonicgarden/copy-tuner-react-intl
yarn add @sonicgarden/copy-tuner-react-intl
bun add @sonicgarden/copy-tuner-react-intl
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-07-27 |
| First published | 2021-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | aki77, mat_aki, mah-lab, akihitofujiwara, tochi, interu, t-kojima, the-red, kontikun, hiropon |

## Links

- npm: https://www.npmjs.com/package/@sonicgarden/copy-tuner-react-intl
- Repository: https://github.com/SonicGarden/copy-tuner-firebase-react-intl
- Homepage: https://github.com/SonicGarden/copy-tuner-firebase-react-intl#readme
- Issues: https://github.com/SonicGarden/copy-tuner-firebase-react-intl/issues
- npm.io page: https://npm.io/package/@sonicgarden/copy-tuner-react-intl

## Dependencies (2)

- [keycode-js](https://npm.io/package/keycode-js.md) ^3.1.0
- [react-intl](https://npm.io/package/react-intl.md) ^5.20.4

## Recent versions

- 1.0.0 (latest) — 2021-07-27

## README

# copy-tuner-react-intl

CopyTuner Client for React Intl

# Installation

```
yarn add @sonicgarden/copy-tuner-react-intl
```

# Usage

Import the css file

```
import '@sonicgarden/copy-tuner-react-intl/css/copyray.css';
```

Add useCopyTuner in YourComponent.jsx

```
import { RawIntlProvider, FormattedMessage } from 'react-intl';
import { useCopyTuner } from '@sonicgarden/copy-tuner-react-intl';

export const YourComponent = () => {
  const { intl } = useCopyTuner({ locale: 'ja', blurbs: { 'hoge': 'fuga' }, url: `copy-tuner-project-url' });
  
  return (
    <>
      {intl && (
        <RawIntlProvier value={intl}>
          <FormattedMessage id="hoge" />
        </RawIntlProvider>)
      }
    </>
  );
};
```

- Example. With @sonicgarden/copy-tuner-firebase-functions

    ```
    import { useEffect, useState } from 'react';
    import { RawIntlProvider, FormattedMessage } from 'react-intl';
    import { useCopyTuner } from '@sonicgarden/copy-tuner-react-intl';

    const fetchCopyTunerBlurbs = firebase.functions().httpsCallable('fetchCopyTunerBlurbs');
    const getCopyTunerUrl = firebase.functions().httpsCallable('getCopyTunerUrl');

    export const YourComponent = ({ locale }) => {
      const [url, setUrl] = useState();
      const [blurbs, setBlurbs] = useState();
      const { intl } = useCopyTuner({ locale, blurbs, url });
      
      useEffect(() => {
        const fetchUrl = async () => {
          const { data } = await getCopyTunerUrl();
          setUrl(data.url);
        };
        
        fetchUrl();
      }, []);
      
      useEffect(() => {
        const fetchBlurbs = async () => {
          const { data } = await fetchCopyTunerBlurbs({ locale });
          setBlurbs(data.blurbs);
        };
        
        fetchBlurbs();
      }, [locale]);
      
      return (
        <>
          {intl && (
            <RawIntlProvier value={intl}>
              <FormattedMessage id="hoge" />
            </RawIntlProvider>)
          }
        </>
      );
    };
    ```

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