Device Info API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

Skip animations for site visitors who prefer reduced motion

This flow starts a background video only for site visitors who haven't turned on their system's reduced-motion setting.

To skip animations for site visitors who prefer reduced motion, follow these steps:

1. Render the video paused by default, without autoPlay, and with a poster image. videoUrl and posterUrl are your own video and poster URLs. The site visitor's setting isn't available while the page renders on the server, so a paused first render keeps the server HTML the same as the browser render:

   Copy

2. Read reducedMotion while the component renders. In an effect, start the video when it's false, and pause it when it's true. Listing reducedMotion in the effect's dependencies runs the effect again when the value changes, so a playing video stops if the site visitor turns the setting on:

   Copy

3. When reducedMotion is true, leave the video paused, and show a play control so the site visitor can start it themselves:

   Copy

Adapt a component for site visitors on phones

To adapt a component for site visitors on phones, follow these steps:

1. Decide which device types get the phone behavior. Smartphone covers phones only. Add Tablet if the behavior suits tablets too:

   Copy

2. Compare deviceType with those values exactly as they're written. Each value starts with a capital letter, so 'smartphone' never matches:

   Copy

3. Render the phone variant, using your own CompactPlayer and FullPlayer components, when isPhone is true. deviceType is the same while the page renders on the server and in the browser, so the server HTML matches the browser render:

   Copy