Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useTranslation alternative with dynamic loading #847

Open
wants to merge 2 commits into
base: canary
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,50 @@ Remember that `['dynamic']` namespace should **not** be listed on `pages` config
- `fallback`- ReactNode - Fallback to display meanwhile the namespaces are loading. - **Optional**.
- `dynamic` - function - By default it uses the [loadLocaleFrom](#3-configuration) in the configuration to load the namespaces, but you can specify another destination. - **Optional**.

### useDynamicTranslation

**Size**: ~?kb 📦

It's a dynamic alternative to `useTranslation` hook, combining its functionality with `DynamicNamespaces`. As a hook, it does not provide a fallback by itself, but returns a `ready` value instead, around which you can create your own logic.

Namespaces from the `pages` configuration are immediately available.

Example:

```jsx
import React from 'react'
import useDynamicTranslation from 'next-translate/useDynamicTranslation'

export default function Description() {
const { t, ready } = useDynamicTranslation("dynamic") // dynamic namespace (required)

const title = t("dynamic:title") // Available once ready === true
const description = t("dynamic:description")
const loading = t("common:loading") // Available from the first render

return (ready ?
<>
<h1>{title}</h1>
<p>{description}</p>
</>
) : <p>{loading}<p>
}
```

The `useDynamicTranslation` hook accepts a namespace like `useTranslation`, but also a loader function as a second parameter, like the `dynamic` prop in `DynamicNamespaces`.

The `t` function has the same signature as `t` from `useTranslation`:

- **Input**:
- **i18nKey**: string (namespace:key)
- **query**: Object _(optional)_ (example: { name: 'Leonard' })
- **options**: Object _(optional)_
- **fallback**: string | string[] - fallback if i18nKey doesn't exist. [See more](#8-fallbacks).
- **returnObjects**: boolean - Get part of the JSON with all the translations. [See more](#7-nested-translations).
- **default**: string - Default translation for the key. If fallback keys are used, it will be used only after exhausting all the fallbacks.
- **ns**: string - Namespace to use when none is embded in the `i18nKey`.
- **Output**: string

### getT

**Size**: ~1.3kb 📦
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,14 @@
"Trans*",
"withTranslation*",
"useTranslation*",
"useDynamicTranslation*",
"setLanguage*",
"index*"
],
"scripts": {
"build": "yarn clean && cross-env NODE_ENV=production && yarn tsc",
"clean": "yarn clean:build && yarn clean:examples",
"clean:build": "rm -rf lib plugin appWith* Dynamic* I18n* index _context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements",
"clean:build": "rm -rf lib plugin appWith* Dynamic* I18n* index _context loadNa* setLang* Trans* useD* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements",
"clean:examples": "rm -rf examples/**/.next && rm -rf examples/**/node_modules && rm -rf examples/**/yarn.lock",
"example": "yarn example:complex",
"example:basic": "yarn build && cd examples/basic && yarn && yarn dev",
Expand Down
6 changes: 6 additions & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ export interface I18n {
lang: string
}

export interface DynamicI18n {
t: Translate
lang: string
ready: boolean
}

export interface I18nProviderProps {
lang?: string
namespaces?: Record<string, I18nDictionary>
Expand Down
50 changes: 50 additions & 0 deletions src/useDynamicTranslation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { useContext, useEffect, useMemo, useState } from 'react'
import { DynamicI18n, I18nConfig, LocaleLoader, I18nDictionary } from '.'
import transCore from './transCore'
import { InternalContext } from './I18nProvider'
import I18nContext from './_context'

export default function useDynamicTranslation(
defaultNS: string,
dynamic?: LocaleLoader
): DynamicI18n {
const [ready, setReady] = useState<boolean>(false)
const internal = useContext(InternalContext)
const ctx = useContext(I18nContext)
const config = internal.config as I18nConfig
const [pageNs, setPageNs] = useState<I18nDictionary | null>(null)
const loadLocale =
dynamic || config.loadLocaleFrom || (() => Promise.resolve({}))

async function loadNamespaces() {
if (typeof loadLocale !== 'function') return

const nameSpace = await loadLocale(ctx.lang, defaultNS)
setPageNs(nameSpace)
setReady(true)
}

useEffect(() => {
if (!defaultNS) {
setReady(true)
return
}
loadNamespaces()
}, [defaultNS])

return useMemo(() => {
const allNamespaces: Record<string, I18nDictionary> = {
...internal.ns,
...(pageNs && { [defaultNS]: pageNs }),
}
const localesToIgnore = config.localesToIgnore || ['default']
const ignoreLang = localesToIgnore.includes(ctx.lang)
const pluralRules = new Intl.PluralRules(ignoreLang ? undefined : ctx.lang)

return {
...ctx,
t: transCore({ config, allNamespaces, pluralRules, lang: ctx.lang }),
ready,
}
}, [ctx.lang, defaultNS, ready, pageNs])
}