# @heliofi/deposit-react

React component for Helio crypto deposits.

## Documentation

For installation, usage, and examples, visit the official Helio documentation:

**[docs.hel.io/docs/deposits](https://docs.hel.io/docs/deposits)**

## Theming — light / dark (Themes V2)

Set `themeMode` on the config to control light/dark:

```tsx
const config = {
  depositCustomerToken: '...',
  themeMode: 'dark', // 'light' | 'dark' — omit to follow the system preference
};
```

- **Themes V2 merchants** (the `themesV2` beta feature is enabled): `themeMode`
  **overrides** the palette; omit it and the widget follows the viewer's system
  preference (`prefers-color-scheme`), because the assigned theme carries both a
  light and a dark palette. Assign a specific theme in the dashboard (per-deposit
  or company default).
- **Legacy merchants** (not on Themes V2): the deposit widget renders in dark
  mode as before — `themeMode` does not change this.


## Custom trigger (open the modal from your own button)

Pass **any React element** as `children` to use it as the trigger. Your element
is rendered immediately (no layout shift) and we merge our open handler onto it —
we do **not** wrap it in another button, so accessibility is preserved. Your own
`onClick` still runs (call `event.preventDefault()` to stop the modal opening).

```tsx
import { MoonpayCommerceDeposit } from '@heliofi/deposit-react';

<MoonpayCommerceDeposit config={config}>
  <button className='my-button'>Deposit</button>
</MoonpayCommerceDeposit>;
```

Prefer full control? Use the `useMoonpayCommerceDeposit` hook (Plaid-style):

```tsx
import { useMoonpayCommerceDeposit } from '@heliofi/deposit-react';

const { open, ready, divRef } = useMoonpayCommerceDeposit(config);
return (
  <>
    {/* required mount point for the widget instance */}
    <div ref={divRef} />
    <button onClick={open} disabled={!ready}>
      Deposit
    </button>
  </>
);
```

If you pass plain text instead of an element, it is wrapped in a
`<button class="deposit-button">` you can style via CSS.

> The `trigger?: HTMLElement` prop (a raw DOM node) is **deprecated** — use
> `children` instead.