DeviceTypeProvider

View source on GitHub

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

Figma:

N/A

Web:

iOS:

Android:

A11y:

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 React from 'react';
import { Box, SideNavigation, DeviceTypeProvider, Button, Flex } from 'gestalt';

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

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

Edit page on GitHub