defaults
prop instead of putting your message as a child, and it will be parsed and updated to the correct format.@babel/react
preset, so any expressions that require more complex parsing may not work.react-i18next
provides additional imports from the icu.macro
. These provide a way to represent translations closer to the ICU messageformat syntax, but in a manner that is compatible with React and strictly typed in typescript.Incremented {num, number} times
number
, date
, time
, select
, plural
, and selectOrdinal
.It's awesome {awesomePercentage, number, ::percent} of the time
.plural
and select
and selectOrdinal
interpolations support more advanced syntax. For instance, it is possible to interpolate both React elements and other interpolations:{awesomePercentage, plural, =0 { It's <0>never</0> awesome } =100 { It is <1>ALWAYS</1> awesome! } =100 { It's awesome {awesomePercentage, number, ::percent} of the time }}
plural
, select
, or selectOrdinal
.number
, plural
, and selectOrdinal
functions will error if a non-number typed variable is interpolated.date
and time
functions will error if a non-Date object is interpolated.select
function will error if a non-string is interpolated.select
and plural
and selectOrdinal
using Elements Select
, Plural
and SelectOrdinal
. All of them have full type safety in typescript.0="show if zero"
=0 {show if zero}
but =
is not allowed to be leading char in attributes so we replaced it with $