diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c5bd01fcc..55fc85db0 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -66,6 +66,8 @@ const preview: Preview = {
publishableKey={publishableKey}
userIdentifierKey={userIdentifierKey}
endpoint={seamEndpoint}
+ disableCssInjection
+ disableFontInjection
>
diff --git a/README.md b/README.md
index 304df52dc..7b919657d 100644
--- a/README.md
+++ b/README.md
@@ -34,8 +34,6 @@ $ npm install @seamapi/react
3. Drop in Seam components.
```ts
-import '@seamapi/react/index.css'
-
import { SeamProvider, DeviceTable } from '@seamapi/react'
export const App = () => {
@@ -54,6 +52,8 @@ export const App = () => {
### Fonts
+> The font is automatically included unless you specify `disableFontInjection` in ``
+
The components are optimized for use with [Source Sans Pro], but will fallback to other system sans-serif fonts.
Load the font from Google Fonts by placing the following in the `` tag:
diff --git a/examples/basic/index.html b/examples/basic/index.html
index 045aee41d..98d397daf 100644
--- a/examples/basic/index.html
+++ b/examples/basic/index.html
@@ -4,10 +4,6 @@
Basic example - Seam React Components
-
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
index 3476c738b..7e4120613 100644
--- a/examples/basic/src/App.tsx
+++ b/examples/basic/src/App.tsx
@@ -1,5 +1,3 @@
-import '@seamapi/react/index.css'
-
import { DeviceTable, SeamProvider } from '@seamapi/react'
export const App = (): JSX.Element => {
diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx
index c3111494d..52e4dd4bb 100644
--- a/src/lib/SeamProvider.tsx
+++ b/src/lib/SeamProvider.tsx
@@ -9,6 +9,9 @@ import {
} from 'react'
import type { Seam, SeamClientOptions } from 'seamapi'
+import { useSeamFont } from './seam/use-seam-font.js'
+import { useSeamStyles } from './seam/use-seam-styles.js'
+
declare global {
// eslint-disable-next-line no-var
var seam: SeamProviderProps | undefined
@@ -22,10 +25,14 @@ export interface SeamContext {
clientSessionToken?: string | undefined
}
-type SeamProviderProps =
+type SeamProviderProps = {
+ disableCssInjection?: boolean | undefined
+ disableFontInjection?: boolean | undefined
+} & (
| SeamProviderPropsWithClient
| (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
| (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
+)
interface SeamProviderPropsWithClient {
client: Seam
@@ -69,6 +76,9 @@ export function SeamProvider({
)
}
+ useSeamStyles({ enabled: !(props.disableCssInjection ?? false) })
+ useSeamFont({ enabled: !(props.disableFontInjection ?? false) })
+
return (
diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts
new file mode 100644
index 000000000..9280f7c45
--- /dev/null
+++ b/src/lib/seam/use-seam-font.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+const fontUrl =
+ 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
+
+export const useSeamFont = ({ enabled }: { enabled: boolean }) => {
+ useEffect(() => {
+ if (globalThis.document == null) return
+ if (!enabled) return
+ const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
+
+ if (linkEl === null) {
+ const link = globalThis.document.createElement('link')
+ link.rel = 'stylesheet'
+ link.type = 'text/css'
+ link.href = fontUrl
+
+ globalThis.document.head.appendChild(link)
+ }
+ }, [enabled])
+}
diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts
new file mode 100644
index 000000000..bd5a45460
--- /dev/null
+++ b/src/lib/seam/use-seam-styles.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+// TODO figure out the version automatically
+const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css'
+
+export const useSeamStyles = ({ enabled }: { enabled: boolean }) => {
+ useEffect(() => {
+ if (globalThis.document == null) return
+ if (!enabled) return
+ const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
+
+ if (linkEl === null) {
+ const link = globalThis.document.createElement('link')
+ link.rel = 'stylesheet'
+ link.type = 'text/css'
+ link.href = cssUrl
+
+ globalThis.document.head.appendChild(link)
+ }
+ }, [enabled])
+}
diff --git a/test/fixtures/react.tsx b/test/fixtures/react.tsx
index f350a3c63..31479aa41 100644
--- a/test/fixtures/react.tsx
+++ b/test/fixtures/react.tsx
@@ -19,6 +19,8 @@ function Providers({ children }: PropsWithChildren): JSX.Element {
endpoint={globalThis.JEST_SEAM_ENDPOINT}
publishableKey={globalThis.JEST_SEAM_PUBLISHABLE_KEY_1}
userIdentifierKey='some_user'
+ disableCssInjection
+ disableFontInjection
>
{children}