Package Exports

react-whatsapp-button
react-whatsapp-button/dist/index.es.js
react-whatsapp-button/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-whatsapp-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Whatsapp floating button

A simple react component to show a Whatsapp floating button.

Content

React Whatsapp floating button

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 👷

_{Kevin Riveros}
💻

License ⚖️

MIT