nylas-locale-switch

The nylas-locale-switch element allows users to select a timezone and language.

PreviewCode

import { NylasLocaleSwitch } from "@nylas/react";

export default function NylasLocaleSwitchExample() {
return (
<div className="inline-block border border-dashed border-gray-300 rounded-md px-4">
  <NylasLocaleSwitch />
</div>
);
}

Properties

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	string

selectedTimezone?

Name	selectedTimezone
Description	The selected time zone.
Type	string

Standalone properties

The following props are automatically configured when used within NylasScheduling. Set these props manually only if you’re using the component independently.

bookingInfo?

Name	bookingInfo
Description	The booking information.
Type	undefined | { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; language?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: Record<string, { value: string; type?: string | undefined; readOnly?: boolean | undefined; }> | undefined; }

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
languageChanged	Fired when the language is changed.
timezoneChanged	Fired when the time zone is changed.

CSS parts

Part	Description
nls	The locale switch container.
nls__language	The language select container.
nls__language-drop-button	The language dropdown button.
nls__language-drop-content	The language dropdown content.
nls__language-drop-label	The language dropdown label.
nls__language-dropdown	The language dropdown.
nls__timezone	The time zone select container.
nls__timezone-drop-button	The time zone dropdown button.
nls__timezone-drop-button-selected-label	The time zone dropdown button selected label.
nls__timezone-drop-content	The time zone dropdown content.
nls__timezone-drop-label	The time zone dropdown label.
nls__timezone-dropdown	The time zone dropdown.

Code samples

The nylas-locale-switch element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneAll supported languagesEvent handlersCustom theme

<nylas-locale-switch
  available-languages='["en", "es", "fr", "de"]'
  selected-language="en"
  on-language-changed="handleLanguageChanged"
></nylas-locale-switch>

<nylas-locale-switch
  available-languages='["en", "es", "fr", "de", "ja", "ko", "nl", "sv", "zh"]'
  selected-language="en"
></nylas-locale-switch>

// Listen for language changes
element.addEventListener("languageChanged", (event) => {
  const newLanguage = event.detail;
  console.log("Language changed to:", newLanguage);

  // Update your app's language
  updateAppLanguage(newLanguage);
});

<nylas-locale-switch
  available-languages='["en", "es", "fr", "de"]'
  selected-language="en"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-locale-switch>