Skip to content

Hydrogen SDK: Components & Hooks

Beta SDK

These SDKs are currently in beta. APIs may change before stable release.

Reference for React components and hooks provided by @rebuy/hydrogen-sdk.

Components

RebuyProvider

The root provider that initializes the SDK. Wrap your Hydrogen app with this component in root.tsx.

Props:

Prop Type Required Description
apiKey string Yes Your Rebuy API key
apiHost string No API host URL
debug boolean No Enable debug logging
nonce string No Content Security Policy nonce for inline scripts. Required when using CSP headers to ensure SDK scripts comply with your security policy.

Example:

// app/root.tsx
import { RebuyProvider } from '@rebuy/hydrogen-sdk';

export default function App() {
    return (
        <html lang="en">
            <body>
                <RebuyProvider apiKey={process.env.PUBLIC_REBUY_API_KEY}>
                    <Layout>
                        <Outlet />
                    </Layout>
                </RebuyProvider>
            </body>
        </html>
    );
}

RebuyProductView

Tracks product view events. Renders nothing visible.

Add this component to your product pages to track which products users view. This data powers the "Recently Viewed" feature.

Props:

Prop Type Required Description
product.id string Yes Shopify GraphQL product ID
product.handle string Yes Product URL handle

Example:

// app/routes/($locale).products.$handle.tsx
import { RebuyProductView } from '@rebuy/hydrogen-sdk';

export default function Product() {
    const { product } = useLoaderData<typeof loader>();

    return (
        <div className="product">
            <RebuyProductView
                product={{
                    id: product.id,
                    handle: product.handle,
                }}
            />
            <h1>{product.title}</h1>
            {/* ... */}
        </div>
    );
}

RecentlyViewed

Fetches and displays recently viewed products. This component handles its own data fetching on the client side.

Props:

Prop Type Required Default Description
limit number No 5 Number of products to fetch
className string No - CSS class for the container
loadingComponent ReactNode No - Custom component for loading state
emptyComponent ReactNode No - Custom component for empty state
onError (error: Error) => void No - Callback for handling errors

Example:

// app/components/RecentlyViewedSection.tsx
import { RecentlyViewed } from '@rebuy/hydrogen-sdk';

export function RecentlyViewedSection() {
    return (
        <section className="recently-viewed">
            <h2>Recently Viewed</h2>
            <RecentlyViewed
                limit={4}
                className="product-grid"
                loadingComponent={<div>Loading...</div>}
                emptyComponent={<div>No products viewed yet</div>}
            />
        </section>
    );
}

Hooks

useRebuy

Access the underlying Rebuy SDK instance for direct API calls from client components.

Returns:

The Rebuy SDK instance with access to all Core SDK methods.

Example:

import { useRebuy } from '@rebuy/hydrogen-sdk';

function MyComponent() {
    const rebuy = useRebuy();

    const trackCustomEvent = async () => {
        await rebuy.tracking.productView('product-id');
    };

    return <button onClick={trackCustomEvent}>Track Event</button>;
}

Context Builder

The SDK exports RebuyContextBuilder from the core SDK for creating rich context objects:

import { RebuyContextBuilder } from '@rebuy/hydrogen-sdk';

// In your loader
const context = new RebuyContextBuilder(rebuy.sdk)
    .withCart(cart)
    .withProduct({ id: 'gid://shopify/Product/123' })
    .withCustomer({ id: 456, tags: ['vip'] })
    .withUrl(request.url)
    .withLocation('US')
    .withLanguage('en')
    .build();

const products = await rebuy.sdk.products.fetchFromDataSource(
    'my-data-source',
    context
);

Available Methods

Method Description
merge(context) Merge an existing context object
withCart(cart) Add cart data
withProduct(product) Add product ID (chainable)
withCustomer(customer) Add customer data
withUrl(url) Extract URL path and parameters
withLocation(countryCode) Add country code (ISO 3166-1)
withLanguage(language) Add language code (ISO 639-1)
build() Return the final context

Client-Side Implementation

For features like Recently Viewed, a client-side implementation is more suitable.

1. Track Product Views

Add the RebuyProductView component to your product pages. It's invisible and handles analytics.

// app/routes/($locale).products.$handle.tsx
import { RebuyProductView } from '@rebuy/hydrogen-sdk';

export default function Product() {
    const { product } = useLoaderData<typeof loader>();

    return (
        <div className="product">
            <RebuyProductView
                product={{
                    id: product.id,
                    handle: product.handle,
                }}
            />
            <h1>{product.title}</h1>
            {/* ... */}
        </div>
    );
}

2. Display Recently Viewed Products

Use the RecentlyViewed component to show the products. The component fetches its own data on the client-side.

// app/components/RecentlyViewedSection.tsx
import { RecentlyViewed } from '@rebuy/hydrogen-sdk';

export function RecentlyViewedSection() {
    return (
        <section className="recently-viewed">
            <h2>Recently Viewed</h2>
            <RecentlyViewed limit={4} />
        </section>
    );
}

TypeScript Support

This package is built with TypeScript and provides comprehensive type definitions.

import type { Product } from '@rebuy/core-sdk';
import type { RebuyProviderProps } from '@rebuy/hydrogen-sdk';

// Get product types from the core SDK
const products: Product[] = await rebuy.sdk.products.getTopSellers();
See something that needs updating? Suggest an edit