3.2.0 • Published 2 years ago
whatsapp-react v3.2.0
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
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
- Determining props
- Ability to send the first chat on the current page
- Ability to Avatar Groups and max Show Avatar
- Ability to show online avatar