Whatsapp React Component

A very simple react component to send Whatsapp messages directly from your React app.

Installation

npm i whatsapp-react-component
// OR
yarn add whatsapp-react-component

Working

Import the UseWhatsapp component from 'whatsapp-react-component'. Pass the mobile-number and message to be sent to the component and it'll open a new browser tab with the chat of the person to whom the number entered belongs to and the message you want to send. That's it!

Note: The mobile number should contain the country code as well.
eg: If the number is from India: +91 XXXXX XXXXX

Demo

Working example

Usage

import React from 'react';
import UseWhatsapp from 'whatsapp-react-component'

const App = () => {
  
    // Arbitrary function for submit
    const onSubmit = () => {
        // Pass values to the component
        UseWhatsapp(mobileNumber, message)
    }

    return (
      <>
        // ------------------ Your Code ----------------------
      </>
    );
}
export default App;

Examples

An example of the usefulness of the component is given below.

Ex: Send a Whatsapp message to the specified number.

import React, { useState } from 'react';
import UseWhatsapp from 'whatsapp-react-component'

const App = () => {
    
    const [formData, setFormData] = useState({
        message: '',
        mobileNumber: ''
    })

    const { message, mobileNumber } = formData

    const onChange = () => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        })
    }

    // Submit function
    const onSubmit = () => {
        // Pass the values to the component
        UseWhatsapp(mobileNumber, message)
    }

    return (
      <>
        <form onSubmit={onSubmit}>        
            <label>
                Mobile Number:
                <input type="text" value={mobileNumber} onChange={onChange} name='mobileNumber' />        
            </label>
            <label>
                Message:
                <input type="text" value={message} onChange={onChange} name='message' />        
            </label>
            <input type="submit" value="Submit" />
        </form>
      </>
    );
}
export default App;

License

whatsapp-react-component is available under the MIT License.