Function initDisplayMode

Initialize display mode detection for the app.

The display mode may be based on the viewport dimensions and if the device is mobile. Also note that you can use isMobile without the display mode framework.

The display modes are strings that should be passed as a type parameter to initDisplayMode. You can create an alias in your code for getting the typed version of addDisplayModeSubscriber, getDisplayMode, and useDisplayMode from pure-react.

import {
    addDisplayModeSubscriber as pureAddDisplayModeSubscriber,
    getDisplayMode as pureGetDisplayMode,
} from "@pistonite/pure/pref";
import { useDisplayMode as pureUseDisplayMode } from "@pistonite/pure-react";

export const MyDisplayModes = ["mode1", "mode2"] as const;
export type MyDisplayMode = (typeof MyDisplayModes)[number];

export const addDisplayModeSubscriber = pureAddDisplayModeSubscriber<MyDisplayMode>;
export const getDisplayMode = pureGetDisplayMode<MyDisplayMode>;
export const useDisplayMode = pureUseDisplayMode<MyDisplayMode>;
Copy

Note that this is not necessary in some simple use cases. For example, adjusting styles based on the viewport width can be done with CSS:

@media screen and (max-width: 800px) {
   /* styles for narrow mode * /
}
Copy

Use this only if the display mode needs to be detected programmatically.