Global options

The setOptions method

Global options can be used to set options for all components used on a page. Useful for speicifying application-wide options, like theme and locale.

You can use the setOptions utility function to specify the global options. It can be called on initial page load or any time later. All existing component on the page will be updated with the new options, and components instantiated later will take into account the new global options.

Components can override the global options with their individual options, e.g. if a component has a specific theme specified, it will override the global theme option.

import {
  Datepicker,
  Eventcalendar,
  setOptions,
  localeDe
} from '@mobiscroll/react';

// Specify options globally for all components
setOptions({
  locale: localeDe,
  theme: 'ios',
  themeVariant: 'dark',
});

export function App() {
  return <>
    <Datepicker />
    <Eventcalendar />
  </>
}

Using context

Context lets a parent component provide data to the entire tree below it. Context is designed to share data that can be considered "global" for a tree of React components, such as the theme, themeVariant or preferred language.

You can import the <OptionsProvider options={obj}/> component from the Mobiscroll bundle. This component provides the options context that Mobiscroll components use. Here's an example:

import { OptionsProvider, Datepicker, Eventcalendar, localeDe } from '@mobiscroll/react';

const GLOBAL_OPTIONS = {
  theme: 'ios',
  themeVariant: 'dark',
  locale: localeDe,
}

export function App() {
  return <OptionsProvider options={GLOBAL_OPTIONS}>
    <Datepicker select="range" />
    <Eventcalendar />
  </OptionsProvider>
}

In the above example both the Datepicker and the Eventcalendar component will get the same theme automatically from the GLOBAL_OPTIONS object through context.