React Whatsapp floating button

A simple react component to show a Whatsapp floating button.

Content

• React Whatsapp floating button
  • Features ✨
  • Install 🐙
  • Usage 💡
  • Examples 🖍
    • With an animation
    • With a custom style
  • Props 🤖
  • Contributing 🍰
  • Maintainers 👷
  • License ⚖️

Features ✨

• Fast.
• Lightweight.
• Easy to use.
• Good for all kind of projects.

Install 🐙

You can install react-whatsapp-button by entering this command

npm i react-whatsapp-button

Usage 💡

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;

Examples 🖍

With an animation

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;

With a custom style

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

Props 🤖

| 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 |

Contributing 🍰

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!

Maintainers 👷

License ⚖️

MIT