nemrosim

    <Plural
      value={amount}
      one='You got {amount} item (one)'
-     zero='You got {amount} items (zero)'
-     few='You got {amount} items (few)'
      many='You got {amount} items (many)'
      other='You got {amount} items (other)'
    />

nemrosim

import React from "react";
import { Plural } from "@lingui/macro";

export const JSXPlurals: React.FC = () => {

   // English rules: https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html#en
   // French rules: https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html#fr
   const amountList = [ 0, 1, 2, 5, 100 ]

   return (

nemrosim

import React from "react";
import { t } from "@lingui/macro";

export const TransPropsExample: React.FC = () => {

   const getSomeValue = () => {
      return 25
   }

   const priceForProduct = getSomeValue();

nemrosim

import React from "react";
import { Trans } from "@lingui/macro";
import { LocaleEnum, useI18nContext } from "../providers";
import { TransRenderProps } from "@lingui/react";

const RenderPropsExample:React.FC<TransRenderProps & { isUppercase: boolean }> = ({ id, message, translation, isUppercase }) => {
   const { locale } = useI18nContext();

   if (!translation || (locale !== LocaleEnum.English && translation === id)) {
      console.error(`MISSING TRANSLATION FOR "${id}". Locale: ${locale}`)

nemrosim

import React from "react";
import { Trans } from "@lingui/macro";
import { LocaleEnum, useI18nContext } from "../providers";
import { TransRenderProps } from "@lingui/react";

const RenderPropsExample:React.FC<TransRenderProps & { isUppercase: boolean }> = ({ id, message, translation, isUppercase }) => {
   const { locale } = useI18nContext();

   if (!translation || (locale !== LocaleEnum.English && translation === id)) {
      console.error(`MISSING TRANSLATION FOR "${id}". Locale: ${locale}`)

nemrosim

            <p>
               <Trans>Edit <code>src/App.tsx</code> and save to reload.</Trans>
            </p>
+           <TransPropsExample isUppercase={true}/>
            <Paragraph/>
            <a
              className="App-link"

nemrosim

import React from "react";
import { Trans } from "@lingui/macro";
import { TransRenderProps } from "@lingui/react";
import { useI18nContext } from "../providers";
import { isUint8Array } from "util/types";

const RenderProps: React.FC<TransRenderProps> = ({ id, translation }) => {
   return (
     <></>
   )

nemrosim

import React from 'react';
import './App.css';
import { Trans } from "@lingui/macro";
import { LocaleEnum, useI18nContext } from "./providers";
import { Paragraph } from "./components/Paragraph";
import { TransPropsExample } from "./components/TransPropsExample";

export const App: React.FC = () => {
   const { locale, setLocale } = useI18nContext();

nemrosim

import React from "react";
import { Trans } from "@lingui/macro";
import { TransRenderProps } from "@lingui/react";

const RenderProps: React.FC<TransRenderProps> = ({ id, translation }) => {
   if (translation) {
      return (
        <>
           {translation}
        </>

nemrosim

msgid ""
msgstr ""
"POT-Creation-Date: 2022-03-26 18:36+0200\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: @lingui/cli\n"
"Language: en\n"

#: src/App.tsx:19