Components Guide
2 mins
<SeamProvider/>
The SeamProvider component accepts a clientSessionToken that enables descendants of the SeamProvider to use the Seam API. A Client Session Token allows a device owner to make API requests to Seam where interactions are restricted only to devices they own. To enable your users to interact with their devices, you'll need to create a client session and pass its token to the <SeamProvider /> .
See this guide for instructions on how to create a client session token.
<SeamProvider clientSessionToken={clientSessionToken}>
<DeviceTable />
</SeamProvider>Props
clientSessionToken*
string
A Client Session Token allows a device owner to make API requests to Seam where interactions are restricted only to devices they own.
<ConnectAccountButton/> (preview)
The connect account button opens a new Connect Webview. Accounts connected from this webview will be associated with the active client session.
<ConnectAccountButton />Size: Desktop
Props
className
string
Optional class name to add to the rendered component's containing element.
<DeviceTable /> (preview)
The devices table shows a list of devices and their statuses.
<DeviceTable />Size: Desktop
Size: Modal
Props
deviceIds
array
Optional list of specific device ids to return when requesting devices from the Seam API.
deviceFilter
function
Optional filter function to filter the listed devices.
Signature: (device: Device, searchInputValue: string) => boolean
deviceComparator
function
Optional comparator function to order the listed devices.
Signature: (deviceA: Device, deviceB: Device) => number
onDeviceClick
function
Optional callback fired when a device is clicked.
Signature: (deviceId: string) => void
preventDefaultOnDeviceClick
boolean
Prevent the default behavior when a device is clicked. Default: false
onBack
function
Optional callback fired when the Back chevron button is clicked.
Signature: () => void
className
string
Optional class name to add to the rendered component's containing element.
<DeviceDetails /> (preview)
The device details component shows the properties, settings, and issues for a device.
<DeviceDetails deviceId={deviceId} />Size: Modal
Props
deviceId*
string
The id for the device that will be shown in the table.
onBack
function
Optional callback fired when the Back chevron button is clicked.
Signature: () => void
className
string
Optional class name to add to the rendered component's containing element.
<AccessCodeTable /> (preview)
The access codes table shows a list of current and future access codes and their statuses.
<AccessCodeTable deviceId={deviceId} />Size: Mobile
Size: Desktop
Props
deviceId*
string
The id for the device whose access codes will be shown in the table.
accessCodeFilter
function
Optional filter function to filter the listed access codes.
Signature: (accessCode: AccessCode, searchInputValue: string) => boolean
accessCodeComparator
function
Optional comparator function to order the listed access codes.
Signature: (accessCodeA: AccessCode, accessCodeB: AccessCode) => number
onAccessCodeClick
function
Optional callback fired when an access code is clicked.
Signature: (accessCodeId: string) => void
preventDefaultOnAccessCodeClick
boolean
Prevent the default behavior when an access code is clicked. Default: false
onBack
function
Optional callback fired when the Back chevron button is clicked.
Signature: () => void
className
string
Optional class name to add to the rendered component's containing element.
<AccessCodeDetails /> (preview)
The access code details component shows the properties, settings, and issues for an access code.
<AccessCodeDetails accessCodeId={accessCodeId} />Size: Mobile
Props
accessCodeId*
string
The id for the access code to be displayed.
onBack
function
true
className
string
Optional class name to add to the rendered component's containing element.
<SupportedDeviceTable /> (preview)
The supported device table allows you to filter, sort, and view all the devices compatible with Seam. You can use this table to indicate what devices are supported by your platform.
<SupportedDeviceTable />Props
cannotFilter
boolean
Hide the controls to filter the table. Default: false
className
string
Optional class name to add to the rendered component's containing element.
Last updated
Was this helpful?