@opensea/next-translate

next-translate

@opensea/next-translate wraps next-translate useTranslate hook and <Trans /> component to support in-code defaults for plural translation variants and a slightly improved interface for translations without variables.

Getting started

Install

npm install

Usage

import { useTranslate, Trans } from '@opensea/next-translate';

const Example = () => {
  const t = useTranslate('ns1');
  const [count, setCount] = useState(0);

  // Second param is default value and third param variables (optional)
  const noVariables = t('example.noVariables', 'No variables');

  // Default values for "zero", "one", and "other" translations variants can be specified in code
  const plurals = t(
    'example.plurals',
    {
      zero: 'No items',
      one: '1 item',
      other: '{{count}} items'
    },
    { count }
  );

  // Default value for "zero" can be omitted and default value for "other" will be used
  const optionalZero = t(
    'example.optionalZero',
    { one: '1 item', other: '{{count}} items' },
    { count }
  );

  // ...

  return (
    <Trans
      i18nKey="mykey"
      ns="mynamespace"
      components={{ link: <a href="www.google.com" /> }}
      defaultTrans={{
        zero: '<link>Zero items, check it out!</link>',
        one: '<link>One item, check it out!</link>',
        other: '<link>More items, check it out!</link>'
      }}
      count={count}
    />
  );
};

Local development

Running tests

npm run test