Skip to main content

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 = {

    //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"
    },

  lang: "en-US",

  // FM
  filemanager: {
    "My files": "My files",

    "Add New": "Add New",
    Ok: "Ok",
    Cancel: "Cancel",

    "Delete files": "Delete Files",
    Files: "Files",
    Folder: "Folder",
    "Back to parent folder": "Back to parent folder",

    Information: "Information",
    Found: "Found",

    "Are you sure you want to delete these items:": "Are you sure you want to delete these items:",
    "Enter file name": "Enter file name",
    "Enter folder name": "Enter folder name",

    Result: "Result",
    Search: "Search",
    "Search results in": "Search results in",
    "Add new file": "Add new file",
    "Add new folder": "Add new folder",
    "Upload file": "Upload file",

    Size: "Size",
    Name: "Name",
    Type: "Type",
    Date: "Date",

    Rename: "Rename",
    Cut: "Cut",
    Delete: "Delete",
    Copy: "Copy",
    Paste: "Paste",
    Download: "Download",
    Count: "Count",
    folder: "folder",
    folders: "folders",
    file: "file",
    files: "files",
    "Multiple files": "Multiple files",
    multiple: "multiple",
    Preview: "Preview",
    of: "of",
    used: "used",
    "Select file or folder to view details": "Select file or folder to view details",
    "Looks like nothing is here": "Looks like nothing is here",
    "Unknown file": "Unknown file",

    "A miniature file preview": "A miniature file preview",
  },
};

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/filemanager-locales", and then pass the combined locale object to the words property of the Locale component.

Example:

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

<Locale words={{ ...cn, ...cnCore }}>
  {/* Your app or FileManager components go here */}
</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 File Manager text labels (it can be any language you need). You also need to add labels from the core and calendar components ("@svar-ui/core-locales"). Refer to Core localization for more details.

Example for the Korean language:

const ko = {
   filemanager: {
       "Add New": "새로운 걸 더하다",
       Ok: " 확인",
       Cancel: "취소",
       //other labels
    },
    core:{ /* ... */ },
    calendar: { /* ... */ }
};

Related sample: Locales