React

Utilisez le SDK Mailpulse avec React en utilisant le Provider intégré et les hooks.

Installation


npm install mailpulse react

Configuration du Provider

Enveloppez votre application avec le MailpulseProvider :


import { MailpulseProvider } from 'mailpulse/react';
 
function App() {
  return (
    <MailpulseProvider apiKey="votre-cle-api">
      <YourApp />
    </MailpulseProvider>
  );
}

Props du Provider

Prop	Type	Requis	Description
`apiKey`	`string`	Oui	Votre clé API Mailpulse
`apiUrl`	`string`	Non	URL API personnalisée
`children`	`ReactNode`	Oui	Composants enfants

useStats

Récupérer les statistiques globales de suivi.


import { useStats } from 'mailpulse/react';
 
function StatsCard() {
  const { data, isLoading, error, refetch } = useStats();
 
  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error.message}</div>;
 
  return (
    <div>
      <p>Total Emails : {data.totalEmails}</p>
      <p>Taux d'Ouverture : {data.openRate}%</p>
      <p>Taux de Clic : {data.clickRate}%</p>
      <button onClick={refetch}>Actualiser</button>
    </div>
  );
}

Type de Retour


interface UseStatsResult {
  data: TrackingStats | null;
  isLoading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

useCampaigns

Récupérer toutes les campagnes.


import { useCampaigns } from 'mailpulse/react';
 
function CampaignList() {
  const { data, isLoading, error } = useCampaigns();
 
  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error.message}</div>;
 
  return (
    <ul>
      {data.campaigns.map(campaign => (
        <li key={campaign.id}>{campaign.name}</li>
      ))}
    </ul>
  );
}

Type de Retour


interface UseCampaignsResult {
  data: CampaignsResponse | null;
  isLoading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

useCampaign

Récupérer une campagne spécifique avec les détails.


import { useCampaign } from 'mailpulse/react';
 
function CampaignDetails({ campaignId }: { campaignId: string }) {
  const { data, isLoading, error } = useCampaign(campaignId);
 
  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error.message}</div>;
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>Emails : {data.stats.totalEmails}</p>
      <p>Taux d'Ouverture : {data.stats.openRate}%</p>
 
      <h2>Emails</h2>
      <ul>
        {data.emails.map(email => (
          <li key={email.id}>
            {email.subject} - {email.opens} ouvertures
          </li>
        ))}
      </ul>
    </div>
  );
}

Paramètres

Paramètre	Type	Description
`campaignId`	`string`	ID de la campagne à récupérer

useCampaignStats

Récupérer des analyses détaillées de la campagne avec des données chronologiques.


import { useCampaignStats } from 'mailpulse/react';
 
function CampaignAnalytics({ campaignId }: { campaignId: string }) {
  const { data, isLoading, error } = useCampaignStats(campaignId, {
    period: '30d',
  });
 
  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error.message}</div>;
 
  return (
    <div>
      <h1>{data.campaign.name}</h1>
      <p>Période : {data.period.start} - {data.period.end}</p>
 
      <h2>Stats</h2>
      <p>Taux d'Ouverture : {data.stats.openRate}%</p>
      <p>Taux de Clics par Ouverture : {data.stats.clickThroughRate}%</p>
 
      <h2>Répartition Journalière</h2>
      {data.openAndClicks.map(day => (
        <div key={day.date}>
          {day.date}: {day.opens} ouvertures, {day.clicks} clics
        </div>
      ))}
 
      <h2>Meilleurs Liens</h2>
      {data.topLinks.map(link => (
        <div key={link.url}>
          {link.url}: {link.clicks} clics
        </div>
      ))}
    </div>
  );
}

Paramètres

Paramètre	Type	Description
`campaignId`	`string`	ID de la campagne
`options.period`	`string`	Filtre de période (`7d`, `30d`, `90d`, ou plage de dates)

useRegisterEmail

Enregistrer un email pour le suivi (hook de mutation).


import { useRegisterEmail } from 'mailpulse/react';
 
function EmailForm() {
  const { registerEmail, isLoading, error, data } = useRegisterEmail();
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
 
    const result = await registerEmail({
      recipient: 'user@example.com',
      subject: 'Bienvenue !',
      htmlContent: '<html>...</html>',
      campaignId: 'my-campaign',
    });
 
    if (result) {
      console.log('ID de Suivi :', result.emailTrackingId);
      console.log('URL du Pixel :', result.pixelUrl);
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Enregistrement...' : 'Enregistrer Email'}
      </button>
      {error && <p>Erreur : {error.message}</p>}
      {data && <p>Enregistré ! ID : {data.emailTrackingId}</p>}
    </form>
  );
}

Type de Retour


interface UseRegisterEmailResult {
  registerEmail: (data: RegisterEmailRequest) => Promise<RegisterEmailResponse | null>;
  isLoading: boolean;
  error: Error | null;
  data: RegisterEmailResponse | null;
}

useMailpulseClient

Accéder directement au client sous-jacent pour des cas d’utilisation avancés.


import { useMailpulseClient } from 'mailpulse/react';
 
function CustomComponent() {
  const client = useMailpulseClient();
 
  const handleClick = async () => {
    const stats = await client.getStats();
    console.log(stats);
  };
 
  return <button onClick={handleClick}>Récupérer Stats</button>;
}

Exemple Complet


import { MailpulseProvider, useStats, useCampaigns } from 'mailpulse/react';
 
function Dashboard() {
  const { data: stats, isLoading: statsLoading } = useStats();
  const { data: campaigns, isLoading: campaignsLoading } = useCampaigns();
 
  if (statsLoading || campaignsLoading) {
    return <div>Chargement du tableau de bord...</div>;
  }
 
  return (
    <div>
      <h1>Tableau de Bord Analytics Email</h1>
 
      <section>
        <h2>Aperçu</h2>
        <div className="stats-grid">
          <div>Emails : {stats?.totalEmails}</div>
          <div>Ouvertures : {stats?.totalOpens}</div>
          <div>Clics : {stats?.totalClicks}</div>
          <div>Taux d'Ouverture : {stats?.openRate}%</div>
        </div>
      </section>
 
      <section>
        <h2>Campagnes ({campaigns?.campaigns.length})</h2>
        <ul>
          {campaigns?.campaigns.map(c => (
            <li key={c.id}>{c.name}</li>
          ))}
        </ul>
      </section>
    </div>
  );
}
 
function App() {
  return (
    <MailpulseProvider apiKey={process.env.MAILPULSE_API_KEY!}>
      <Dashboard />
    </MailpulseProvider>
  );
}
 
export default App;