use-whatsapp-sender

use-whatsapp-sender is a custom React hook that simplifies sending messages via WhatsApp. This hook formats a URL using the WhatsApp Web API to initiate a chat with the specified phone number and message.

Installation

Install the package via npm:

npm install use-whatsapp-sender

Usage

First, import the useWhatsAppSender hook into your React component:

import useWhatsAppSender from 'whatsapp-sender-hook';

const WhatsAppButton = () => {
  const sendWhatsAppMessage = useWhatsAppSender();

  const handleSendMessage = () => {
    sendWhatsAppMessage('1234567890', 'Hello! This is a test message.');
  };

  return <button onClick={handleSendMessage}>Send Message on WhatsApp</button>;
};

export default WhatsAppButton;

Parameters

• phoneNumber (string): The phone number to send the message to. Non-numeric characters will be stripped out automatically.

• message (string): The text message to send.

Example

In this example, when the button is clicked, it will open WhatsApp Web (or the WhatsApp app on mobile) and initiate a chat with the specified phone number, pre-filling the text field with the message.

sendWhatsAppMessage('1234567890', 'Hello from my React app!');

How it Works?

The useWhatsAppSender hook creates a URL with the https://wa.me/ API endpoint, appending the formatted phone number and message. When called, it opens WhatsApp in a new tab or window.

Notes ℹ️

• Phone Number Format: Only include the country code and phone number, omitting any + symbols or extra characters. For example, use 1234567890 instead of +123-456-7890.

• Dependencies: This hook requires React v16.8.0 or later for hooks support.

Enjoy! coding 🥳🎉