whatsapp-react

WhatsApp Package For React

whatsApp chat begins here!

More than 2 billion people in over 180 countries use WhatsApp1 to stay in touch with friends and family, anytime and anywhere. WhatsApp is free2 and offers simple, secure, reliable messaging and calling, available on phones all over the world.

• Installation
• Demo
• Usage
• Information
• Props
• License
• Author
• TODO

Installation

npm i whatsapp-react

Demo

USE WhatsApp Package

import React from "react";
import WhatsApp from "whatsapp-react";
import userOne from "./lib/components/user_one.jpg";
import userTwo from "./lib/components/user_two.jpg";
import userThree from "./lib/components/user_three.jpg";
import userFour from "./lib/components/user_four.jpg";
import sendIcon from "./lib/components/img/send.png";

function App() {
  const englishAccounts = [
    {
      name: "Jeffrey Brown",
      position: "creative leader",
      account: "98912*******",
      avatar: <img src={userOne} alt="" />,
      status: false,
    },
    {
      name: "${{accountList.*.name}}",
      position: "${{accountList.*.position}}",
      account: "98912*******",
      avatar: <img src={userFive} alt="" />,
      status: true,
    },
    {
      name: "Alex Grinfield",
      position: "programming guru",
      account: "98912*******",
      avatar: <img src={userThree} alt="" />,
      status: true,
    },
    {
      name: "Roxie Swanson",
      position: "Sales Manager",
      account: "98912*******",
      avatar: <img src={userFour} alt="" />,
      status: true,
    },
  ];
  const persianAccounts = [
    {
      name: "نیما کاویانی",
      position: "مدیر محصول",
      account: "98912*******",
      avatar: <img src={userOne} alt="" />,
      status: false,
    },
    {
      name: "سارا لطیفی ",
      position: "مدیر پشتیبانی",
      account: "98912*******",
      avatar: <img src={userTwo} alt="" />,
      status: true,
    },
    {
      name: "علی عزیزی",
      position: "مدیر برنامه نویسی",
      account: "98912*******",
      avatar: <img src={userThree} alt="" />,
      status: true,
    },
    {
      name: "سحر کیانی",
      position: "مدیر فروش",
      account: "98912*******",
      avatar: <img src={userFour} alt="" />,
      status: true,
    },
  ];

  return (
    <div>
      <WhatsApp
        tooltipTitle={"Do you have any questions about this product?"}
        tooltipDescription="Chat via WhatsApp"
        title={"chat start"}
        lead={"Please chat on WhatsApp"}
        description={"Responsive, usually responds in minutes"}
        accountList={englishAccounts}
        phoneNumber="98912*******"
        textareaPlaceholder="send message ..."
        widthSendIcon={42}
      />
      <WhatsApp
        phoneNumber="98912*******"
        textareaPlaceholder="پیامی ارسال کنید ..."
        sendIcon={sendIcon}
        widthSendIcon={42}
        dir="rtl"
        position="right"
        tooltipTitle={"در مورد این محصول سوالی دارید؟"}
        tooltipDescription="چت از طریق واتس‌اپ"
        title={"شروع مکالمه"}
        lead={"لطفا در واتس‌اپ چت نمایید."}
        description={"پاسخگو،‌به طور معمول در چند دقیقه پاسخ می‌دهد"}
        accountList={persianAccounts}
      />
    </div>
  );
}

Informatin

Props

props	defaultValue	description	status of requirements
accountList	[]	[{name: "", position: "", account: "", avatar: null, status: true }]	required *
dir	ltr	ltr || rtl	optional
phoneNumber	string	phone number to send in the first texterea	optional
textareaPlaceholder	string	textareaPlaceholder to send in the first texterea	optional
sendIcon	string	send icon image to send in the first texterea	optional
widthSendIcon	string	width send icon to send in the first texterea	optional
position	left	left || right	optional
tooltipTitle	string	The question in tooltip title	optional
tooltipDescription	string	The desired tooltip description	optional
title	string	Text to get started	optional
lead	string	Text to lead	optional
description	string	description text	optional
color	#ffffff	any color	optional
backgroundColor	#376466	any color	optional

License

MIT

Author

Minoo Tavakoli

TODO

• [x] Determining props
• [x] Ability to send the first chat on the current page
• [ ] Ability to Avatar Groups and max Show Avatar
• [ ] Ability to show online avatar