# @codedbypol/translate

> Npm package to handle translations in client side of React. It consist on a context used to surround your app and a custom hook were the sent key is auto-translated

Latest version **1.0.2** (published 2024-04-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @codedbypol/translate
pnpm add @codedbypol/translate
yarn add @codedbypol/translate
bun add @codedbypol/translate
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2024-04-12 |
| First published | 2024-04-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pol Gubau Amores |
| Maintainers | polgubau |
| Keywords | react, translations, i18n, internationalization, language, translate, context, hook |

## Links

- npm: https://www.npmjs.com/package/@codedbypol/translate
- Repository: https://github.com/PolGubau/translate-react-package
- Homepage: https://github.com/PolGubau/translate-react-package#readme
- Issues: https://github.com/PolGubau/translate-react-package/issues
- npm.io page: https://npm.io/package/@codedbypol/translate

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [pol-ui](https://npm.io/package/pol-ui.md) ^2.1.21

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2024-04-12
- 1.0.1 — 2024-04-12
- 1.0.0 — 2024-04-12

## README

# @codedbypol/translations

Npm package to handle translations in client side of **React**.
It consist on:

1. A context used to surround your app.
2. A custom hook were the sent key is auto-translated

Feel free to contribute to this project.

## Installation

```bash
npm install @codedbypol/translations
```

## Usage

1. Create a file with your translations. For example, `translations.js`:

```javascript
export default {
  en: {
    hello: "Hello",
    world: "World",
  },
  es: {
    hello: "Hola",
    world: "Mundo",
  },
};
```

2. Wrap your app with the `TranslationContext` and pass the translations as a prop:

```javascript
import React from "react";

import translations from "./translations";
const App = () => {
  return (
    <TranslationContext.Provider
      value={{ key: "language", defaultLanguage: "en", translations }}
    >
      <YourApp />
    </TranslationContext.Provider>
  );
};
```

3. Use the `useTranslate` hook to translate your keys:

```javascript
import React from "react";
import { useTranslate } from "@codedbypol/translations";

const YourApp = () => {
  const { t } = useTranslate();
  return (
    <div>
      <h1>{t("hello")}</h1>
      <h2>{t("world")}</h2>
    </div>
  );
};
```

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