` takes 1 property that is `formatMessage`.
- Because it is dynamic and supports multiple i18n libraries (react-intl, i18n and others), You have to provide formatting function as prop.
- Provided translations needs to be as **_readonly array_**.
#### Simple hook example
```ts
const translationStrings = [
'errors.toast',
'errors.bookings.status',
'errors.bookings.confirmation'
] as const;
const translations = useTranslations(translationStrings);
translations: {
errorsToast: 'translation';
errorsBookingsStatus: 'translation';
errors.BookingsConfirmation: 'translation';
}
```
#### With react-intl example
https://github.com/Klosiek/use-translations/tree/main/example/ReactIntlExample.tsx
```tsx
import { IntlContext, IntlProvider } from 'react-intl';
import { TranslationProvider, useTranslations } from 'use-translations';
const messages = {
pl: {
'form.post.code': 'Kod pocztowy react-intl',
},
en: {
'form.post.code': 'Post code react-intl',
},
};
export const ReactIntlExample = () => {
const locale = 'en';
return (
{({ formatMessage }) => (
formatMessage({ id })}>
)}
);
};
const MessageExample = () => {
const testTranslations = ['form.post.code'] as const;
const translations = useTranslations(testTranslations);
return <>{translations.formPostCode};
};
```
#### With i18n example
https://github.com/Klosiek/use-translations/tree/main/example/I18nExample.tsx
```tsx
import i18n from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';
import { TranslationProvider, useTranslations } from 'use-translations';
const messages = {
pl: {
'form.post.code': 'Kod pocztowy i18n',
},
en: {
'form.post.code': 'Post code 18n',
},
};
i18n.use(initReactI18next).init({
resources: {
pl: {
translation: messages.pl,
},
en: {
translation: messages.en,
},
},
});
i18n.changeLanguage('en');
export const I18nExample = () => {
const { t } = useTranslation();
return (
t(id)}>
);
};
const MessageExample = () => {
const testTranslations = ['form.post.code'] as const;
const translations = useTranslations(testTranslations);
return {translations.formPostCode}
;
};
```
For now it only supports translations separated with `.`
## API
## useTranslations
- #### Props
| Prop name | Description | Default value | Example values |
| --------- | ------------------------------------------------- | ------------- | --------------------------------------------- |
| default | Array of translations to create dynamically types | [] | ['form.first.name', 'form.errors.first.name'] |
- #### Returns
Hook return object of translations in camelCase provided in hook.
### TranslationProvider
- #### Props
| Prop name | Description | Default value | Example values |
| ------------- | --------------------------------- | ------------- | --------------------------- |
| formatMessage | Function provided by i18n library | null | (id) => formatMessage({id}) |
## Authors
👤 **Sebastian Kłosiński**
- Github: [@Klosiek](https://github.com/Klosiek)
- LinkedIn: [@https://www.linkedin.com/in/sebastian-klosinski](https://www.linkedin.com/in/sebastian-klosinski/)
Thanks to [@Jaaneek](https://github.com/Jaaneek) for guidance.
## [](https://github.com/Klosiek/use-translations#-contributing)🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Klosiek/useFilePicker/issues).
## Show your support
Give a ⭐️ if this project helped you!
[](https://emoji.gg/emoji/5344-pixelshiba)
---
_Source: https://npm.io/package/use-translations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._