@emblemvault/embeddable

Universal wrapper to make any React component embeddable with API data fetching.

Installation

npm install @emblemvault/embeddable

Basic Usage

import { Embeddable } from '@emblemvault/embeddable';
import { MyComponent } from './MyComponent';

function App() {
  return (
    <Embeddable
      apiUrl="https://api.example.com/data"
      params={{ userId: '123' }}
    >
      <MyComponent />
    </Embeddable>
  );
}

The wrapper fetches data from the API and spreads the JSON response as props onto your component.

With Identity Mesh

import { Embeddable } from '@emblemvault/embeddable';
import { IdentityMeshRenderer } from '@emblemvault/identity-mesh';

function EmbeddedMesh({ vaultId, visitorId }) {
  return (
    <Embeddable
      apiUrl="https://api.emblemvault.io/api/embed/mesh"
      params={{ vaultId, visitorId }}
      theme={{ background: '#0a0a0f' }}
    >
      <IdentityMeshRenderer />
    </Embeddable>
  );
}

Authentication Strategies

Bearer Token

<Embeddable
  apiUrl="/api/data"
  auth={{ type: 'bearer', token: 'your-jwt-token' }}
>
  <MyComponent />
</Embeddable>

API Key

import { apiKeyAuth } from '@emblemvault/embeddable';

<Embeddable
  apiUrl="/api/data"
  auth={apiKeyAuth('your-api-key', 'X-API-Key')}
>
  <MyComponent />
</Embeddable>

Basic Auth

import { basicAuth } from '@emblemvault/embeddable';

<Embeddable
  apiUrl="/api/data"
  auth={basicAuth('username', 'password')}
>
  <MyComponent />
</Embeddable>

Signature-based

import { signatureAuth } from '@emblemvault/embeddable';

<Embeddable
  apiUrl="/api/data"
  auth={signatureAuth(
    (payload) => crypto.sign(payload, privateKey),
    publicKey
  )}
>
  <MyComponent />
</Embeddable>

Custom Auth

import { customAuth } from '@emblemvault/embeddable';

<Embeddable
  apiUrl="/api/data"
  auth={customAuth(async () => ({
    'X-Custom-Header': await getToken(),
  }))}
>
  <MyComponent />
</Embeddable>

Props

| Prop | Type | Description | |------|------|-------------| | apiUrl | string | API endpoint to fetch data from | | params | Record<string, unknown> | Parameters sent in request body (POST) or query string (GET) | | auth | AuthStrategy | Authentication strategy | | request | RequestConfig | Request configuration (method, headers, timeout, retries) | | transformData | (data: unknown) => TData | Transform API response before passing to child | | theme | EmbeddableTheme | Theme configuration | | refetchInterval | number | Auto-refetch interval in ms (0 = disabled) | | onError | (error: Error) => void | Error callback | | onLoad | (data: TData) => void | Success callback | | loadingComponent | ReactNode | Custom loading component | | errorComponent | ReactNode \| Function | Custom error component | | emptyComponent | ReactNode | Custom empty state component | | className | string | Container className | | style | CSSProperties | Container style |

Custom Loading/Error States

<Embeddable
  apiUrl="/api/data"
  loadingComponent={<MySpinner />}
  errorComponent={(error, retry) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={retry}>Retry</button>
    </div>
  )}
  emptyComponent={<p>No data found</p>}
>
  <MyComponent />
</Embeddable>

Using the Hook Directly

For custom implementations:

import { useEmbeddableData } from '@emblemvault/embeddable';

function CustomComponent() {
  const { data, loading, error, refetch } = useEmbeddableData({
    apiUrl: '/api/data',
    params: { id: '123' },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

License

MIT