@wa-ma/react

WAMA WhatsApp Messaging hooks and context providers for React and Next.js applications.

Prerequisites

To use this integration library, you must first register an account and retrieve your WhatsApp instance API key from the WAMA Portal.

Installation

npm install @wa-ma/react @wa-ma/sdk

Features

• React Context Provider: Supply the WAMA API key at the root of your application.
• Client Component Compatibility: Bundles are packaged with the "use client"; directive, ensuring they compile cleanly in Next.js App Router projects.
• Stateful Hook (useWama): Automatically tracks the loading, success, error, and messageId states for seamless UI updates.

Usage

1. Configure the Provider

Wrap your React root or Next.js App layout in the WamaProvider:

import React from "react";
import { WamaProvider } from "@wa-ma/react";

export default function App() {
  return (
    <WamaProvider apiKey="YOUR_WHATSAPP_API_KEY">
      <MessageSender />
    </WamaProvider>
  );
}

2. Use the Hooks

Retrieve the client and send messages from child components:

import React, { useState } from "react";
import { useWama } from "@wa-ma/react";

export function MessageSender() {
  const { sendMessage, loading, success, error } = useWama();
  const [recipient, setRecipient] = useState("");
  const [message, setMessage] = useState("");

  const handleSend = async () => {
    await sendMessage(recipient, message);
  };

  return (
    <div>
      <input 
        placeholder="Recipient Number" 
        value={recipient} 
        onChange={(e) => setRecipient(e.target.value)} 
      />
      <textarea 
        placeholder="Message content" 
        value={message} 
        onChange={(e) => setMessage(e.target.value)} 
      />
      
      <button onClick={handleSend} disabled={loading}>
        {loading ? "Sending..." : "Send Message"}
      </button>

      {success === true && <p>Message queued successfully!</p>}
      {error && <p style={{ color: "red" }}>Error: {error}</p>}
    </div>
  );
}

3. Inline Initialization (Without Provider)

You can optionally bypass the context provider and pass the token directly to the hook:

import { useWama } from "@wa-ma/react";

function SimpleButton() {
  // Configures the hook directly for one-off actions
  const { sendMessage } = useWama("YOUR_WHATSAPP_API_KEY");
  
  return (
    <button onClick={() => sendMessage("+966501234567", "Quick Hello!")}>
      Quick Send
    </button>
  );
}