# React Integration

Use the NPM package and initialize the SDK client on the client side. Then inject components after mount.

## Install

```bash
npm install @liquidcommerce/elements-sdk
```

## Basic Product Page

```jsx
import { useEffect, useState } from 'react';
import { Elements } from '@liquidcommerce/elements-sdk';

export default function ProductPage() {
  const [client, setClient] = useState(null);

  useEffect(() => {
    let mounted = true;
    (async () => {
      const instance = await Elements('YOUR_API_KEY', { env: 'production' });
      if (mounted) setClient(instance);
    })();
    return () => { mounted = false; };
  }, []);

  useEffect(() => {
    if (!client) return;
    client.injectProductElement([
      { containerId: 'product', identifier: '00619947000020' }
    ]);
  }, [client]);

  return <div id="product"></div>;
}
```

## Cart Button

```jsx
import { useEffect } from 'react';

export default function CartButton() {
  useEffect(() => {
    if (!window.LiquidCommerce.elements) return;
    window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
  }, []);

  return <div id="header-cart"></div>;
}
```

## Notes

- The SDK is SSR-safe — importing it on the server resolves a no-op stub automatically. Initialize in `useEffect` to get the real client.
- For multiple products, call `injectProductElement` with multiple entries.

## Related Docs

- [Product Component](../guides/product-component.md)
- [Cart Component](../guides/cart-component.md)
- [Client API](../api/client.md)