Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Check the demo here Check the source code here
However, there are a libraries that can help to not reinvent the wheel. In this blog post, we will use next-i18next.
import { useTranslation } from "next-i18next"; import React from "react"; const BuiltInFormatsDemo = () => { const { t } = useTranslation("built-in-demo"); return (
{/* "number": "Number: {{val, number}}", */} {t("number", { val: 123456789.0123, })} p>
{/* "currency": "Currency: {{val, currency}}", */} {t("currency", { val: 123456789.0123, style: "currency", currency: "USD", })} p>
{/* "dateTime": "Date/Time: {{val, datetime}}", */} {t("dateTime", { val: new Date(1234567890123), formatParams: { val: { weekday: "long", year: "numeric", month: "long", day: "numeric", }, }, })} p>
{/* "relativeTime": "Relative Time: {{val, relativetime}}", */} {t("relativeTime", { val: 12, style: "long", })} p>
{/* "list": "List: {{val, list}}", */} {t("list", { // https://www.i18next.com/translation-function/objects-and-arrays#objects // Check the link for more details on `returnObjects` val: t("weekdays", { returnObjects: true }), })} p> div> ); }; export default BuiltInFormatsDemo;
In my early days of development, I find i18n to be a tedious task. However, in NextJS, it is relatively simple to create such as challenging feature.