GrapesProvider

GrapesProvider is the container for all Grapes applications. It defines the locale, and other application level settings such as the Mapbox access token for the AutocompletePlace.

A GrapesProvider must be the root component of your application. Many Grapes components rely on the GrapesProvider to define the locale, and other settings that they need in order to render.

View source code

Basic usage

import { GrapesProvider } from "@dev-spendesk/grapes";

const RootApp = ({ children }) => {
  return (
    <GrapesProvider
      locale="en-US" // Locale of the user
      localesDefinition={{
        fallbackLocale: "en-US", // Fallback if locale isn't defined in locales
        locales: {
          "en-US": {
            cancel: "Cancel",
            close: "Close",
            nextMonth: "Next month",
            previousMonth: "Previous month",
            openCalendar: "Open calendar",
            show: "show",
            hide: "hide",
            showOptions: "Show options",
            edit: "Edit",
            clearSelection: "Clear selection",
            selectCurrency: "Select a currency",
            deleteWithName: ({ name }) => `Delete ${name}`,
          },
        },
      }}
    >
      {children}
    </GrapesProvider>
  );
};

While many components offer props for labels, titles, and descriptions, certain complex components require translations specifically for accessibility purposes. Those translations are common and shared between multiple components, that's why we decided to define it here, in the GrapesProvider.

To prevent bundling all localization strings for every language, Grapes allows you to define those keys directly from the GrapesProvider using the props localesDefinition.

GrapesProvider

Basic usage

Internationalization