@smart-mailto/react

React components and hooks for smart-mailto — a geo-aware webmail picker that replaces broken mailto: links.

npm i @smart-mailto/react

Requires react >= 17.0.0. Peer: @smart-mailto/core.

Usage

Magic Mode (app-level — intercepts all mailto: links)

import { SmartMailtoProvider } from '@smart-mailto/react';

function App() {
  return (
    <SmartMailtoProvider theme="dark" autoDetectGeo>
      <RestOfYourApp />
    </SmartMailtoProvider>
  );
}

Component (per-link)

import { SmartMailto } from '@smart-mailto/react';

<SmartMailto href="mailto:[email protected]" theme="dark">
  Contact Us
</SmartMailto>;

Hook (programmatic)

import { useSmartMailto } from '@smart-mailto/react';

function ContactButton() {
  const { open } = useSmartMailto();
  return <button onClick={() => open('[email protected]')}>Email Us</button>;
}

API

<SmartMailtoProvider>

| Prop | Type | Default | Description | | ------------------- | ----------------------------- | -------- | --------------------------- | | theme | 'dark' \| 'light' \| 'auto' | 'auto' | Modal color scheme | | autoDetectGeo | boolean | true | Reorder providers by region | | preferredProvider | string? | — | Default-selected provider | | maxProviders | number | 6 | Max visible providers | | includeNative | boolean | true | Show "Mail App" option | | includeCopy | boolean | true | Show copy-to-clipboard | | children | ReactNode | — | App tree |

Accepts all options from SmartMailtoConfig.

<SmartMailto>

Wraps a child element (typically text or a button). Same props as SmartMailtoConfig plus href.

useSmartMailto()

Returns { open: (email: string, subject?, body?) => void }.

License

MIT