Skip to content

@elementrics elementrics

next-translate-localekeys 1.1.0

Install from the command line:
Learn more about npm packages
$ npm install @elementrics/next-translate-localekeys@1.1.0
Install via package.json:
"@elementrics/next-translate-localekeys": "1.1.0"

About this version

Next-translate LocaleKeys

Intended for use in conjunction with next-translate. Used for generating all possible keys for the useTranslation hook with type safety.

How to install

npm install --save-dev next-translate-localekeys

How to run

npx next-translate-localekeys

Example one (Mode: "generate"):

Requirements

  1. Translation Files are in /examples/locales/en
  2. Goal to get all my locale keys in the generated (/examples/generated) folder with typescript support and translation comments
  3. Using default seperator for next-translate

Actions

  1. run npm next-translate-localekeys --rootDir ./examples/locales/en --outDir ./examples/generated --typescript --translations
  2. Go to your file where you want to use the useTranslation hook
import { FC } from 'react'; 
import useTranslation from 'next-translate/useTranslation';
import { LocaleKeys } from './examples/generated/locale_keys.g';

export const DivWithTitleFromCommonNamespace: FC = () => {
    const { t } = useTranslation(LocaleKeys.common);

    return <div>{t(LocaleKeys._common.title)}</div>;
}

Example two (Mode: "compile"):

Requirements

  1. All the source code of the project which is using the locale keys object is located in examples/compiled/after
  2. typescript project
  3. only in production

Actions

  1. Optional: insert command into pipeline (github action)
  2. run node . next-translate-localekeys compile --rootDir ./examples/compiled/after --typescript
  3. see result:

before:

import useTranslation from "next-translate/useTranslation";

import { LocaleKeys } from "../../generated/locale_keys.g";

export const Test = () => {
  const { t } = useTranslation(LocaleKeys.common);

  return (
    <div>
      <div>{t(LocaleKeys._common.title)}</div>
      <div>{t(LocaleKeys._home.description)}</div>
      <div>{t(`${LocaleKeys._more_examples._nested_example.very_nested}.nested`)}</div>
    </div>
  );
};

after:

import useTranslation from "next-translate/useTranslation";



export const Test = () => {
  const { t } = useTranslation('common');

  return (
    <div>
      <div>{t('common:title')}</div>
      <div>{t('home:description')}</div>
      <div>{t(`${'more_examples:nested-example.very-nested'}.nested`)}</div>
    </div>
  );
};

Configuration

To get all configurations possible: npx next-translate-localekeys --help

Flag Description Type Default Required
mode current mode "compile" or "generate" - *
rootDir location of the source code. string - *
outDir place of the generated output. string rootDir
errDir location of error file. string rootDir
typescript enables typescript. boolean false
translations enables translation comments. boolean false
nsSeparator char to split namespace from key. string ":"
keySeparator change the separator that is used for nested keys. string "."

Details

Assets

  • next-translate-localekeys-1.1.0-npm.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all