Using i18n Trans with custom components

Posted on January 10, 2025, 7:46 pm, by admin, under nexjs, react.

React/Next.Js/Javascript page

const currency = €;
const { t } = useTranslation();
<Trans
 t={t}
 i18nKey={'Path.To.Mykey'}
 components={{
  customspantorender: <Customspan currency={currency} />,
 }}
/>

Customspan.tsx

import React from 'react';
 
const Customspan = ({ currency }) => {
const amount = 15.99;
  return (
   <span>{currency} {amount}</span>
  );
};
export default Customspan;

sample.json

"Path": {
  "To": {
    "Mykey": "(Amount = <customspantorender>€€€</customspantorender>)"
  },
}
Comment (RSS)  |  Trackback

Leave a Reply

«