A simple react component to show a Whatsapp floating button.
Content
- Fast.
- Lightweight.
- Easy to use.
- Good for all kind of projects.
You can install react-whatsapp-button by entering this command
npm i react-whatsapp-button
import React from "react";
import ReactWhatsappButton from "react-whatsapp-button";
function App() {
return (
<div className="App">
<ReactWhatsappButton
countryCode="51"
phoneNumber="987654321"
/>
</div>
)
}
export default App;
import React from "react";
import ReactWhatsappButton from "react-whatsapp-button";
function App() {
return (
<div className="App">
<ReactWhatsappButton
countryCode="51"
phoneNumber="987654321"
animated
/>
</div>
)
}
export default App;
import React from "react";
import ReactWhatsappButton from "react-whatsapp-button";
function App() {
return (
<div className="App">
<ReactWhatsappButton
countryCode="51"
phoneNumber="987654321"
style={{
backgroundColor: "#00a4f5",
right: "unset",
left: "10px",
}}
/>
</div>
)
}
export default App;You can try all the variations here: https://react-whatsapp-button.vercel.app/?path=/story/whatsapp-button--default
| Attribute | Type | Default | Required | Description |
|---|---|---|---|---|
| countryCode | string |
"" | yes | country code without . Example: 51 |
| phoneNumber | string |
"" | yes | Phone Number |
| message | string |
"" | no | Custom message |
| animated | boolean |
false |
no | Add an animation to the button |
| callback | function |
() => {} |
no | Add a callback function to the button |
| style | object |
{} |
no | Modify the default style with a custom object |
Feel free to add a new pull request to improve this amazing package.
Thank you to all the people who already contributed to this project!
 Kevin Riveros 💻 |
MIT