2.0.0 • Published 3 years ago

@waveplay/pilot-i18next v2.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

GitHub license Tests npm minizipped size

Support for i18next in Pilot router

Install

Using NPM

npm install @waveplay/pilot-i18next next-i18next

Using Yarn

yarn add @waveplay/pilot-i18next next-i18next

Getting started

Register your translations with this module using the built-in CLI. We assume that your i18n translations are inside the /public/locales directory.

pilot-i18next build

All this command does is copy those translations into the module and generate a import-resource.js for internal use.

Basic usage

Wrap your app export with the appWithTranslation function. This will automatically add the i18n instance + resources to your app's context.

App.tsx

const App = () => {
  // ... your code
};
export default appWithTranslation(App);

Include serverSideTranslations in your returned props from your getServerSideProps function. Be sure to specify the namespaces you want to load.

example-page.tsx

export const getServerSideProps = async (context) => {
  const { locale } = context;

return { props: { ...(await serverSideTranslations(locale, 'common')) } }; };

You're now ready to use the `useTranslation` hook in your components!

> `example-page.tsx`
```tsx
const ExamplePage = () => {
  const { t } = useTranslation('common');

  return (
    <View>
      <Text>{t('title')}</Text>
    </View>
  );
};

It's recommended to import the useTranslation hook directly from react-i18next.

Common issues

Your bundler may complain about the fs module not being found. That's because this module exports next-i18next for web builds, which are not meant to be used on native.

To fix this, create two files named the same way, but one with a .native.ts extension like this:

pilot-i18next.ts

export * from '@waveplay/pilot-i18next/dist/index';

pilot-i18next.native.ts

export * from '@waveplay/pilot-i18next/dist/index.native';

... and change your imports in your code to use this file instead.

App.tsx

import { appWithTranslation, serverSideTranslations } from './pilot-i18next';

Your bundler should now happily import only the .native version on native builds, keeping the fs issue away.

Credits

This project was originally developed for WavePlay.

License

The MIT License.

2.0.0

3 years ago

2.0.0-next.5

3 years ago

2.0.0-next.3

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.1

3 years ago

2.0.0-canary.14

3 years ago

2.0.0-canary.13

3 years ago

2.0.0-canary.12

3 years ago

2.0.0-canary.11

3 years ago

2.0.0-next.0

3 years ago

2.0.0-canary.10

3 years ago

2.0.0-canary.9

3 years ago

2.0.0-canary.8

3 years ago

2.0.0-canary.7

3 years ago

2.0.0-canary.6

3 years ago

2.0.0-canary.5

3 years ago

2.0.0-canary.0

3 years ago

2.0.0-alpha.0

3 years ago

2.0.0-beta.7

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago