Make a Supported Devices Page with React

Use Seam Components to make a Supported Devices page

Overview

Seam adds supports for smart devices every week and by integrating with Seam, you get access to these new devices too!

This guide will show you how to drop <SupportedDeviceTable /> into your React application.

1 - Install @seamapi/react in your React application

npm install --save @seamapi/react
# or via yarn
yarn add @seamapi/react

2 - Get a Publishable Key from the Seam Console

To access the Seam API, you'll need a publishable key. This key identifies your application when making requests to Seam and is safe to embed in your frontend code.

Go to console.seam.co and select "Client Sessions" from the sidebar. You should then see a "Publishable Key" that you can copy.

3 — Import and Drop In the <SupportedDeviceTable /> Component

import { SeamProvider, SupportedDeviceTable } from "@seamapi/react"

export const App = () => (
  <SeamProvider publishableKey="YOUR_PUBLISHABLE_KEY">
    <SupportedDeviceTable />
  </SeamProvider>
)

You should see a list of device models like what's shown below:

Next Steps

• View and play with other components in the interactive storybook component library

• Check out some Full Example Apps

If you have any questions or want to report an issue, email us at [email protected].