{"id":24764508,"url":"https://github.com/seamapi/react","last_synced_at":"2025-10-28T20:06:34.621Z","repository":{"id":153688445,"uuid":"620430216","full_name":"seamapi/react","owner":"seamapi","description":"Seam Components are a set of white-labeled UI elements that can be added to your application in seconds. Use them in any app as native web components or as React components and hooks.","archived":false,"fork":false,"pushed_at":"2025-09-30T23:52:38.000Z","size":6312,"stargazers_count":7,"open_issues_count":39,"forks_count":2,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-10-01T15:56:18.788Z","etag":null,"topics":["maintained"],"latest_commit_sha":null,"homepage":"https://react.seam.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seamapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-28T17:02:59.000Z","updated_at":"2025-07-08T23:06:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1c4c26e-4cf9-4568-9cb9-d92b228ed052","html_url":"https://github.com/seamapi/react","commit_stats":null,"previous_names":[],"tags_count":210,"template":false,"template_full_name":null,"purl":"pkg:github/seamapi/react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seamapi%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seamapi%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seamapi%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seamapi%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seamapi","download_url":"https://codeload.github.com/seamapi/react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seamapi%2Freact/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007457,"owners_count":26084313,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["maintained"],"created_at":"2025-01-28T22:32:01.546Z","updated_at":"2025-10-28T20:06:34.608Z","avatar_url":"https://github.com/seamapi.png","language":"TypeScript","readme":"# Seam Components\n\n[![npm](https://img.shields.io/npm/v/@seamapi/react.svg)](https://www.npmjs.com/package/@seamapi/react)\n[![GitHub Actions](https://github.com/seamapi/react/actions/workflows/check.yml/badge.svg)](https://github.com/seamapi/react/actions/workflows/check.yml)\n\n\u003e Seam Components may be used in **any** web application as native **[⚡Web Components ⚡](#with-native-web-components)**\n\n## Description\n\n\u003e [See our official announcement!](https://www.seam.co/blog/Introducing-Seam-Components_ce7e8985-2fe6-4780-8c60-055b34daee55) 🎉\n\nSeam Components are a set of white-labeled UI elements that can be added to your application in seconds.\nWith these components, you can offer advanced device management features to your users without needing to develop complex logic for managing device state,\nrefreshing data, and performing actions.\n\n### Resources to Get Started\n\n- [Seam Components Overview](https://docs.seam.co/latest/seam-components/overview)\n- [Get started with Seam](https://www.seam.co/).\n- [Get started without needing a backend](https://docs.seam.co/latest/seam-components/get-started-with-client-side-components).\n- [Get started with Angular](https://docs.seam.co/latest/seam-components/overview/angular).\n- [Get started with Vue](https://docs.seam.co/latest/seam-components/overview/vue).\n- [Get started with Client Sessions](https://docs.seam.co/latest/seam-components/get-started-with-react-components-and-client-session-tokens).\n- [Make a Supported Devices Page](https://docs.seam.co/latest/seam-components/make-a-supported-devices-page).\n- Reference the [Component API](https://docs.seam.co/latest/seam-components/react-components).\n- Find developer specific technical documentation in the [README](https://github.com/seamapi/react/).\n- Play with the components live in the interactive [Storybook](https://react.seam.co/)!\n- See how the components work with a real Seam sandbox workspace in this [live example app](https://react.seam.co/examples/basic/).\n- Clone a [sample app in your preferred framework](https://github.com/seamapi/seam-components-sample-apps).\n- [API reference documentation generated by TypeDoc](https://react.seam.co/api-docs/).\n\n### Live Examples\n\n- \u003ca href='/examples/basic/'\u003eBasic Example App\u003c/a\u003e ([source](https://github.com/seamapi/react/tree/main/examples/basic/))\n- \u003ca href='/examples/web-components/'\u003eWeb Components Example App\u003c/a\u003e ([source](https://github.com/seamapi/react/tree/main/examples/web-components/))\n\n## Installation\n\nAdd this as a dependency to your project using [npm] with\n\n```\n$ npm install @seamapi/react\n```\n\n[npm]: https://www.npmjs.com/\n\n## Usage\n\n### With React\n\n\u003e Check out the [basic example app](./examples/basic)!\n\n1. Obtain a publishable key from the [Seam Console].\n2. Wrap your React app with the `SeamProvider`.\n3. Drop in Seam Components.\n\n```tsx\nimport { ConnectAccountButton, DeviceTable, SeamProvider } from '@seamapi/react'\n\nexport function App() {\n  return (\n    \u003cSeamProvider publishableKey='your_publishable_key'\u003e\n      \u003cmain\u003e\n        \u003ch1\u003eMy App\u003c/h1\u003e\n        \u003cConnectAccountButton /\u003e\n        \u003cDeviceTable /\u003e\n      \u003c/main\u003e\n    \u003c/SeamProvider\u003e\n  )\n}\n```\n\n[Seam Console]: https://console.seam.co/\n\n### With Native Web Components\n\n\u003e Check out the [web component example app](./examples/web-components)!\n\n1. Obtain a publishable key from the [Seam Console].\n2. Add the `\u003cscript\u003e` tag to your page and drop in Seam Components.\n\n```html\n\u003cbody\u003e\n  \u003cseam-connect-account-button\n    publishable-key=\"your_publishable_key\"\n  \u003e\u003c/seam-connect-account-button\u003e\n  \u003cseam-device-table publishable-key=\"your_publishable_key\"\u003e\u003c/seam-device-table\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://react.seam.co/v/4.13.2/dist/elements.js\"\n  \u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n\u003e Update the version in the script tag above with the exact version of this package you would like to use.\n\n#### Web component attributes and properties\n\nEach React component is defined as a custom element:\n\n- The element name is in in kebab-case,\n  e.g., `\u003cDeviceTable\u003e` becomes `\u003cseam-device-table\u003e`.\n- Each element is wrapped in a `\u003cSeamProvider /\u003e`.\n- An attribute and custom property is defined for each `\u003cSeamProvider /\u003e` prop and component prop.\n- Attributes are in kebab-case and properties are in snakeCase.\n\nAttributes map directly to component props.\nAll attributes are passed as strings, thus non-string props have some limitations:\n\n- Number props will be parsed using `parseFloat`.\n- Boolean props should be passed as `true` or `false`, e.g., `disable-css-injection=\"true\"` or `disable-css-injection=\"false\"`.\n- Array props may be passed as JSON, e.g., `device-ids=\"[\"foo\", \"bar\"]\"`,\n  or CSV, e.g., `device-ids=\"foo,bar\"`.\n- Function and object props should not be passed as attributes.\n  Set them as properties instead.\n\nUse custom properties to work directly with JavaScript objects and primitives.\n\n- This will avoid any issues with string parsing and serialization.\n- Use the `onSessionUpdate` prop to maintain a reference to the internal Seam client.\n\nFor example,\n\n```js\nglobalThis.customElements.whenDefined('seam-device-table').then(() =\u003e {\n  const elements = globalThis.document.getElementsByTagName('seam-device-table')\n  const element = elements[0]\n  if (element == null) {\n    throw new Error('Cannot find seam-device-table in document')\n  }\n  let seam\n  element.onSessionUpdate = (client) =\u003e {\n    seam = client\n  }\n  element.onDeviceClick = (deviceId) =\u003e {\n    if (seam == null) return\n    seam.devices.get({ device_id: deviceId }).then(console.log)\n  }\n})\n```\n\n[Seam Console]: https://console.seam.co/\n\n### React Hooks\n\nAll components interact with the Seam API via a set of React Hooks.\nYou can use these hooks directly in your application to build your own components.\n\nImport hooks directly from `@seamapi/react` or `@seamapi/react/hooks`.\nFor most applications, these imports are equivalent,\nhowever if you are only using the hooks, we recommend importing from `@seamapi/react/hooks`\nas it may enable performance or bundling improvements depending on your build system.\n\nHooks must be used inside the `SeamProvider`.\nThey are well-typed and follow a uniform API.\n\n```tsx\nimport { SeamProvider, useDevices } from '@seamapi/react/hooks'\n\nexport function App() {\n  return (\n    \u003cSeamProvider publishableKey='your_publishable_key'\u003e\n      \u003cmain\u003e\n        \u003ch1\u003eMy App\u003c/h1\u003e\n        \u003cDevices /\u003e\n      \u003c/main\u003e\n    \u003c/SeamProvider\u003e\n  )\n}\n\nfunction Devices() {\n  const { devices, isPending, isError, error } = useDevices()\n\n  if (isPending) {\n    return \u003cp\u003eLoading\u003c/p\u003e\n  }\n\n  if (isError) {\n    return \u003cp\u003e{error?.message}\u003c/p\u003e\n  }\n\n  return (\n    \u003c\u003e\n      \u003ch2\u003eDevices\u003c/h2\u003e\n      \u003cdiv\u003e\n        {devices?.map((device) =\u003e (\n          \u003cp key={device.device_id}\u003e{device.properties.name}\u003c/p\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Styles\n\n\u003e CSS is automatically included unless using `\u003cSeamProvider disableCssInjection /\u003e`.\n\nComponents are styled with plain Cascading Style Sheets (CSS).\nAll styles are prefixed with `seam-` to avoid name collisions.\n\nBy default, the `SeamProvider` will inject a link tag into the document head to load the CSS.\nIf you prefer to manually load the CSS,\nthis behavior may be disabled with the `disableCssInjection` prop.\nThen, either import the CSS using a supported bundler with\n\n```tsx\nimport '@seamapi/react/index.css'\n```\n\nor place the following in the `\u003chead\u003e` tag:\n\n\u003e You must match the version string below with the exact version of this package used by your application.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://react.seam.co/v/4.13.2/dist/index.min.css\"\n/\u003e\n```\n\n#### Customizing Styles\n\n\u003e The `seam-` prefixed CSS class names are not part of the stable API and may change unexpectedly.\n\nEach component accepts a `className` prop.\nThe class name will be set on the top level container, or if a sub-component is rendered, passed though.\nThis makes them compatible with native CSS and most CSS-in-JS systems, e.g., [Emotion] and [styled-components].\n\n[Emotion]: https://emotion.sh/\n[styled-components]: https://styled-components.com/\n\n#### Using inside a modal dialog\n\nA Seam Component must be a child of a DOM element with the `seam-components` class name\nfor the CSS styles to work properly.\nNormally, all Seam Components are rendered as child of the `\u003cSeamProvider /\u003e`\nwhich ensures this condition.\n\nReact implementations of the modal dialog pattern often allow specifying\nthe contents of the modal as a child element, yet render the contents of the modal\nin the DOM under a different parent element outside of the current branch of the DOM tree.\nThus, even when a Seam Component is logically rendered as a child of the `\u003cSeamProvider /\u003e`\nin the React tree, it will be rendered outside of that branch of tree in the actual DOM.\n\n\u003e This concern does not apply when using the Seam Components as web components.\n\u003e Each custom element already wraps the underlying component inside a container element with the correct class name.\n\u003e The lack of a default container element for each React component\n\u003e is an intentional decision to align with the standard React provider design pattern.\n\nTo handle this special case, use the `seamComponentsClassName` on the container that will\nwrap the dialog content, e.g.,\n\n```ts\nimport { useState } from \"react\"\nimport { Button, Dialog } from \"@mui/material\"\nimport { seamComponentsClassName, DeviceTable } from \"@seam/react\"\n\nfunction DeviceTableInsideModal() {\n  const [open, setOpen] = useState(false)\n  const handleOpen = () =\u003e {\n    setOpen(true)\n  }\n  const handleClose = () =\u003e {\n    setOpen(false)\n  }\n  return (\n    \u003c\u003e\n      \u003cButton onClick={handleOpen}\u003eOpen\u003c/Button\u003e\n      \u003cDialog\n        className={seamComponentsClassName}\n        open={open}\n        onClose={handleClose}\n      \u003e\n        \u003cDeviceTable /\u003e\n      \u003c/Dialog\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Fonts\n\n\u003e Fonts are automatically included unless using `\u003cSeamProvider disableFontInjection /\u003e`.\n\nThe components are optimized for use with [Source Sans Pro], but will fallback to other system sans-serif fonts.\n\nBy default, the `SeamProvider` will inject a link tag into the document head to load the font.\nIf you prefer to manually provide the font,\nthis behavior may be disabled with the `disableFontInjection` prop.\nThen, load it from Google Fonts by placing the following in the `\u003chead\u003e` tag:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700\u0026display=swap\"\n/\u003e\n```\n\n[Source Sans Pro]: https://fonts.google.com/specimen/Source+Sans+Pro\n\n### Content Security Policy (CSP)\n\n#### Default CSP\n\nWhen using the default provider settings, the components are compatible with this CSP:\n\n```\ndefault-src 'self'; connect-src 'self' https://connect.getseam.com; img-src 'self' https://connect.getseam.com; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com\n```\n\n#### Granular CSP\n\nDepending on which assets you choose to host yourself, the CSP may be made stricter.\n\nBy self hosting the styles and recommended fonts (or choosing not to use them),\nand proxying the Seam API endpoint, the components are compatible with this strict CSP:\n\n```\ndefault-src 'self'; img-src 'self' https://connect.getseam.com\n```\n\nThe `img-src` is required as some components display device images from the Seam API.\n\nWhen using the default endpoint, extend `connect-src` with\n\n```\nconnect-src 'self' https://connect.getseam.com\n```\n\nWhen serving the fonts from Google Fonts, include `font-src` and `style-src` with\n\n```\nfont-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com\n```\n\nWhen serving the CSS styles from the default CDN, extend `style-src` with\n\n```\nstyle-src https://react.seam.co\n```\n\n### Telemetry\n\nBy default, this library reports basic usage telemetry to the Seam API.\nThis may be completely disabled with `\u003cSeamProvider disableTelemetry\u003e`.\n\nBefore disabling telemetry, please consider the following:\n\n- Telemetry is sent directly to the Seam API and is never sold to third parties.\n- Telemetry is used by Seam for the sole purpose of improving Seam Components\n  and directly enhancing the experience for your end users.\n- No data is persisted on the client beyond the lifetime of the browser session: this library does not use cookies or local browser storage.\n- Telemetry may be selectively disabled for some users to align with any existing data collection compliance requirements of your application.\n- Telemetry does not negatively impact performance and adds minimal background network overhead.\n- The implementation is small, simple to audit, and completely transparent: [src/lib/telemetry](src/lib/telemetry).\n\n## Development and Testing\n\n### Quickstart\n\n```\n$ git clone https://github.com/seamapi/react.git\n$ cd react\n$ nvm install\n$ npm install\n$ npm start\n```\n\nPrimary development tasks are defined under `scripts` in `package.json`\nand available via `npm run`.\nView them with\n\n```\n$ npm run\n```\n\n### Source code\n\nThe [source code] is hosted on GitHub.\nClone the project with\n\n```\n$ git clone git@github.com:seamapi/react.git\n```\n\n[source code]: https://github.com/seamapi/react\n\n### Requirements\n\nYou will need [Node.js] with [npm] and a [Node.js debugging] client.\nAlternately, develop in the cloud with [Codespaces].\n\n[codespaces]: https://github.com/features/codespaces\n\nBe sure that all commands run under the correct Node version, e.g.,\nif using [nvm], install the correct version with\n\n```\n$ nvm install\n```\n\nSet the active version for each shell session with\n\n```\n$ nvm use\n```\n\nInstall the development dependencies with\n\n```\n$ npm install\n```\n\n[Node.js]: https://nodejs.org/\n[Node.js debugging]: https://nodejs.org/en/docs/guides/debugging-getting-started/\n[npm]: https://www.npmjs.com/\n[nvm]: https://github.com/creationix/nvm\n\n### Storybook\n\nDevelop components with [Storybook].\n\nRun the full storybook in development mode with\n\n```\n$ npm start\n```\n\nThe deployed storybook runs in docs mode which does not contain the full storybook.\nDevelop the storybook in docs mode with\n\n```\n$ npm run docs:start\n```\n\n[Storybook]: https://storybook.js.org/\n\n#### Chromatic\n\n[Chromatic] automates visual and interaction tests for Storybook.\n\nThe full storybook for the main branch is hosted at\n[storybook.react.seam.co](https://storybook.react.seam.co).\n\nOn each commit, the full storybook is published to Chromatic for review.\nOn pull requests, Chromatic will run UI regressions tests on each commit.\nChromatic reports results as status checks that link directly to the storybook.\n\nIf changes are detected, follow the link in the status checks to approve the changes.\n_Contributors must be granted access to approve changes on Chromatic;\nrequest access from another maintainer of this project._\n\n##### Note on PR from forks\n\nPull requests from a public fork do not have access to the\nVercel secrets required to retrieve the preview deployment URL.\nFor these PRs, the Chromatic Storybook and Chromatic UI tests will run against the\nfake version and fake seed from the main branch.\n\n_If your PR is from a public fork and requires updates to the fake version or seed,\nreach out to a project maintainer for assistance._\n\n[Chromatic]: https://www.chromatic.com/\n\n### Previews\n\nEvery pull request deploys the storybook in docs mode with the examples\nin a [Vercel Preview Deployment]\nwhere you may [comment directly on the preview][Vercel Comments].\nThis is the same storybook published on [react.seam.co](https://react.seam.co).\n\n[Vercel Preview Deployment]: https://vercel.com/docs/concepts/deployments/preview-deployments\n[Vercel Comments]: https://vercel.com/docs/concepts/deployments/comments\n\n### Fake Seam Connect\n\nThis project uses a [fake version of Seam Connect](https://github.com/seamapi/fake-seam-connect)\nto have deterministic responses for rendering views and running tests.\n\nThe tests use the [default seed](https://github.com/seamapi/fake-seam-connect/blob/main/src/lib/database/seed.ts).\n\nEdit the Storybook seed data for the fake or find relevant ids for testing components here:\n[Storybook fake seed](./.storybook/seed-fake.js).\n\n### Fake Devicedb\n\nFake Seam Connect optionally depends on a [fake version of the Seam Devicedb](https://github.com/seamapi/fake-devicedb).\nThis is required by some components and hooks in this project.\n\nThe seed data for the fake is generated by pulling data from the real API.\nUpdate this seed data with\n\n```\n$ npm run storybook:update-devicedb-seed\n```\n\n### Tests\n\nWrite tests with [Vitest].\n\n[Vitest]: https://vitest.dev/\n\n### Examples\n\nFind fully working examples apps under `examples/`.\nEach example app is built and deployed along with the Storybook documentation.\n\nRun and develop the examples with,\n\n```\n$ npm run examples\n```\n\n### SVG Icon Components\n\nThe React components under `src/lib/icons` are generated from `assets/icons`.\nTo add a new icon:\n\n1. Place or update the SVG icon in `assets/icons`.\n2. Run `npm run generate`.\n3. Import with\n\n```tsx\nimport { SeamIcon } from 'lib/icons/SeamIcon.js'\n```\n\n### Publishing\n\n#### Automatic\n\nNew versions are released automatically with [semantic-release]\nas long as commits follow the [Angular Commit Message Conventions].\n\n[Angular Commit Message Conventions]: https://semantic-release.gitbook.io/semantic-release/#commit-message-format\n[semantic-release]: https://semantic-release.gitbook.io/\n\n#### Manual\n\nPublish a new version by triggering a [version workflow_dispatch on GitHub Actions].\nThe `version` input will be passed as the first argument to [npm-version].\n\nThis may be done on the web or using the [GitHub CLI] with\n\n```\n$ gh workflow run version.yml --raw-field version=\u003cversion\u003e\n```\n\n[GitHub CLI]: https://cli.github.com/\n[npm-version]: https://docs.npmjs.com/cli/version\n[version workflow_dispatch on GitHub Actions]: https://github.com/seamapi/react/actions?query=workflow%3Aversion\n\n## GitHub Actions\n\n_GitHub Actions should already be configured: this section is for reference only._\n\nThe following repository secrets must be set on [GitHub Actions]:\n\n- `NPM_TOKEN`: npm token for installing and publishing packages.\n- `GH_TOKEN`: A personal access token for the bot user with\n  `packages:write` and `contents:write` permission.\n- `GIT_USER_NAME`: The GitHub bot user's real name.\n- `GIT_USER_EMAIL`: The GitHub bot user's email.\n- `GPG_PRIVATE_KEY`: The GitHub bot user's [GPG private key].\n- `GPG_PASSPHRASE`: The GitHub bot user's GPG passphrase.\n- `VERCEL_ACCESS_TOKEN`: The Vercel project token.\n\nThe following repository variables must be set on [GitHub Actions]:\n\n- `VERCEL_TEAM_ID`: The Vercel team id.\n- `STORYBOOK_SEAM_ENDPOINT`: The Seam endpoint to use with Storybook.\n- `STORYBOOK_SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with Storybook.\n- `STORYBOOK_SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with Storybook.\n\n### R2 Bucket\n\nThe following repository variables must be set on GitHub Actions:\n\n- `CLOUDFLARE_ACCOUNT_ID`: The Cloudflare account id.\n- `CLOUDFLARE_R2_BUCKET_NAME`: The Cloudflare R2 bucket name.\n- `CLOUDFLARE_R2_BUCKET_REGION`: The Cloudflare R2 bucket region.\n- `CLOUDFLARE_R2_ACCESS_KEY_ID`: The Cloudflare R2 bucket access key id.\n\nThe following repository secrets must be set on GitHub Actions:\n\n- `CLOUDFLARE_R2_SECRET_ACCESS_KEY`: The Cloudflare R2 secret access key.\n\n[GitHub Actions]: https://github.com/features/actions\n[GPG private key]: https://github.com/marketplace/actions/import-gpg#prerequisites\n\n## Vercel\n\n_Vercel should already be configured: this section is for reference only._\n\nThe following environment variables must be set on [Vercel]:\n\n- `SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with the examples.\n- `SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with the examples..\n- `STORYBOOK_SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with Storybook.\n- `STORYBOOK_SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with Storybook.\n\n[Vercel]: https://vercel.com/seamapi/react\n\n## Contributing\n\n\u003e If using squash merge, edit and ensure the commit message follows the [Angular Commit Message Conventions] specification.\n\u003e Otherwise, each individual commit must follow the [Angular Commit Message Conventions] specification.\n\n1. Create your feature branch (`git checkout -b my-new-feature`).\n2. Make changes.\n3. Commit your changes (`git commit -am 'Add some feature'`).\n4. Push to the branch (`git push origin my-new-feature`).\n5. Create a new draft pull request.\n6. Ensure all checks pass.\n7. Mark your pull request ready for review.\n8. Wait for the required approval from the code owners.\n9. Merge when ready.\n\n[Angular Commit Message Conventions]: https://semantic-release.gitbook.io/semantic-release/#commit-message-format\n\n## License\n\nThis npm package is licensed under the [MIT license].\n\n[MIT license]: https://github.com/seamapi/react/blob/main/LICENSE.txt\n\n## Warranty\n\nThis software is provided by the copyright holders and contributors \"as is\" and\nany express or implied warranties, including, but not limited to, the implied\nwarranties of merchantability and fitness for a particular purpose are\ndisclaimed. In no event shall the copyright holder or contributors be liable for\nany direct, indirect, incidental, special, exemplary, or consequential damages\n(including, but not limited to, procurement of substitute goods or services;\nloss of use, data, or profits; or business interruption) however caused and on\nany theory of liability, whether in contract, strict liability, or tort\n(including negligence or otherwise) arising in any way out of the use of this\nsoftware, even if advised of the possibility of such damage.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseamapi%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseamapi%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseamapi%2Freact/lists"}