Localization

The library provides two built-in locales:

• English
• Chinese

You can also apply a custom locale.

Default locale

The English locale is applied by default:

const en = {
    lang: "en-US",

    //calendar
    calendar: {
        monthFull: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ],
        monthShort: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
        
        dayFull: [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
        ],

        dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        hours: "Hours",
        minutes: "Minutes",
        done: "Done",
        clear: "Clear",
        today: "Today",
        am: ["am", "AM"],
        pm: ["pm", "PM"],
        
        weekStart: 7,
        clockFormat: 24
    },

    //core
    core: {
        ok:"OK",
        cancel:"Cancel",
        select: "Select",
        "No data": "No data"
    },

    //formats
    formats: {
        dateFormat: "%d.%m.%Y",
        timeFormat: "%H:%i",
        monthYearFormat: "%F %Y",
        yearFormat: "%Y",
    },

    //Grid
    grid: {
        "Add before": "Add before",
        "Add after": "Add after",
        Copy: "Copy",
        Delete: "Delete",
    },
};

Applying locales

To apply a built-in locale, import the Locale component from "@svar-ui/react-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/grid-locales", and then add the words prop for the required language to the Locale component. Then, wrap Grid with the Locale component.

Example:

import { Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/grid-locales";
import { cn as cnCore } from "@svar-ui/core-locales";
import { Grid } from "@svar-ui/react-grid";

const App = ({ data, columns }) => (
  <Locale words={{ ...cn, ...cnCore }}>
    <Grid data={data} columns={columns} />
  </Locale>
);

To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Grid text labels (it can be any language you need), and then follow the instructions from above to apply the locale.

Example for the Korean language:

import { Locale } from "@svar-ui/react-core";
import { Grid } from "@svar-ui/react-grid";

const ko = {
    grid: {
        Copy: "복사",
        Delete: "삭제",
        // other
    },
    calendar: { /* ... */ } // if needed 
    //other
};

const App = ({ data, columns }) => (
  <Locale words={{ ko }}>
    <Grid data={data} columns={columns} />
  </Locale>
);