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