DeviceTypeProvider

DeviceTypeProvider is an optional React Context provider to enable device-specific UI for Gestalt components that support it.

Gestalt components that require DeviceTypeProvider to enable their mobile user interfaces have a Mobile variant section in their documentation page. Check each example to learn more about their particular implementations.

Props

Component props
Name
Type
Default
children
Required
React.Node
-
deviceType
Required
"desktop" | "mobile"
-

The device type as determined by logic within your app.

Implementation

Gestalt components can have different interfaces depending on the user's device. We currently support "desktop" and "mobile".

Components default to a responsive "desktop" UI. DeviceTypeProvider is required to enable mobile-specific variants where available.

This provider should be implemented at the top level of your app. Any additional nested DeviceTypeProviders will override the top-level configuration.

While device detection can (for now) be performed using the user-agent string, this is not generally recommended. Thankfully, there are better solutions!

The example shows a component with different desktop and mobile UIs.

import { useState } from 'react';
import { Box, Button, DeviceTypeProvider, Flex, SideNavigation } from 'gestalt';

export default function Example() {
  const [deviceType, setDeviceType] = useState('desktop');

  return (
    <Flex>
      <Box padding={2}>
        <Button
          accessibilityControls="sidenav"
          accessibilityLabel={`Toggle to ${
            deviceType === 'desktop' ? 'mobile' : 'desktop'
          } view`}
          color="red"
          onClick={() =>
            setDeviceType((value) =>
              value === 'desktop' ? 'mobile' : 'desktop'
            )
          }
          size="lg"
          text={`Toggle to ${
            deviceType === 'desktop' ? 'mobile' : 'desktop'
          } view`}
        />
      </Box>
      <Flex.Item flex="grow">
        <DeviceTypeProvider deviceType={deviceType}>
          <Box
            alignItems="center"
            color="secondary"
            display="flex"
            height={500}
            justifyContent="center"
          >
            <Box color="default" height={450} id="sidenav" width={280}>
              <SideNavigation
                accessibilityLabel="Mobile device example"
                dismissButton={{
                  onDismiss: () => {},
                  accessibilityLabel: 'Close navigation',
                }}
                mobileTitle="Advertisement"
              >
                <SideNavigation.TopItem
                  href="#"
                  icon="ads-stats"
                  label="Reporting"
                  onClick={({ event }) => event.preventDefault()}
                />
                <SideNavigation.TopItem
                  href="#"
                  icon="replace"
                  label="Conversions"
                  onClick={({ event }) => event.preventDefault()}
                />
                <SideNavigation.Section label="Audiences">
                  <SideNavigation.TopItem
                    href="#"
                    icon="people"
                    label="Thanksgiving"
                    onClick={({ event }) => event.preventDefault()}
                  />

                  <SideNavigation.Group icon="people" label="Christmas">
                    <SideNavigation.NestedItem
                      href="#"
                      label="Luxury Christmas"
                      onClick={({ event }) => event.preventDefault()}
                    />

                    <SideNavigation.NestedGroup label="Classic Christmas">
                      <SideNavigation.NestedItem
                        href="#"
                        label="West Coast"
                        onClick={({ event }) => event.preventDefault()}
                      />
                      <SideNavigation.NestedItem
                        href="#"
                        label="East Coast"
                        onClick={({ event }) => event.preventDefault()}
                      />
                    </SideNavigation.NestedGroup>

                    <SideNavigation.NestedGroup label="Alternative Christmas">
                      <SideNavigation.NestedItem
                        href="#"
                        label="West Coast"
                        onClick={({ event }) => event.preventDefault()}
                      />
                      <SideNavigation.NestedItem
                        href="#"
                        label="East Coast"
                        onClick={({ event }) => event.preventDefault()}
                      />
                    </SideNavigation.NestedGroup>
                  </SideNavigation.Group>
                  <SideNavigation.Group
                    display="static"
                    icon="people"
                    label="Halloween"
                  >
                    <SideNavigation.NestedItem
                      href="#"
                      label="East Coast"
                      onClick={({ event }) => event.preventDefault()}
                    />
                    <SideNavigation.NestedItem
                      href="#"
                      label="West Coast"
                      onClick={({ event }) => event.preventDefault()}
                    />
                  </SideNavigation.Group>
                </SideNavigation.Section>
              </SideNavigation>
            </Box>
          </Box>
        </DeviceTypeProvider>
      </Flex.Item>
    </Flex>
  );
}

Internal documentation

Edit page on GitHub