# react-floating-whatsapp > Simple React Component for adding a floating WhatsApp button to your project. Latest version **5.0.8** (published 2022-12-31) · MIT license · 0 weekly downloads ## Install ```sh npm install react-floating-whatsapp pnpm add react-floating-whatsapp yarn add react-floating-whatsapp bun add react-floating-whatsapp ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 5.0.8 | | Published | 2022-12-31 | | First published | 2021-05-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=16 | | Dependencies | 0 | | Unpacked size | 327.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 96 | | Author | awran5 | | Maintainers | awran5 | | Keywords | react, whatsapp, floating whatsapp button, whatsapp button, react component, react typescript | ## Links - npm: https://www.npmjs.com/package/react-floating-whatsapp - Repository: https://github.com/awran5/react-floating-whatsapp - Homepage: https://react-floating-whatsapp.vercel.app/ - Issues: https://github.com/awran5/react-floating-whatsapp/issues - npm.io page: https://npm.io/package/react-floating-whatsapp ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 5.0.8 (latest) — 2022-12-31 - 5.0.7 — 2022-12-01 - 5.0.6 — 2022-10-20 - 5.0.5 — 2022-10-19 - 5.0.4 — 2022-10-07 - 5.0.2 — 2022-10-07 - 5.0.1 — 2022-10-07 - 5.0.0 — 2022-10-07 - 4.0.5 — 2021-09-25 - 4.0.4 — 2021-09-25 - 4.0.2 — 2021-09-25 - 4.0.1 — 2021-09-25 - 0.0.0-development — 2021-09-25 - 4.0.0 — 2021-09-25 - 3.0.0 — 2021-08-20 - … 13 more at https://npm.io/package/react-floating-whatsapp/versions ## README # React Floating Whatsapp > Simple react component for adding a floating WhatsApp button to your project. [![NPM](https://img.shields.io/npm/v/react-floating-whatsapp.svg)](https://www.npmjs.com/package/react-floating-whatsapp) ![npm bundle size](https://img.shields.io/bundlephobia/min/react-floating-whatsapp) ![GitHub](https://img.shields.io/github/license/awran5/react-floating-whatsapp)

screenshot

## Install #### npm ```bash npm i react-floating-whatsapp ``` #### Yarn ```bash yarn add react-floating-whatsapp ``` ## [v5.0.0](https://github.com/awran5/react-floating-whatsapp/compare/v4.0.5...v5.0.0) - 2022-10-07 - **BREAKING CHANGES:** change **default** import to **name** import - **BREAKING CHANGES:** rename `height` prop to `chatboxHeight` - **BREAKING CHANGES:** rename `styles` prop to `style` - **BREAKING CHANGES:** `notificationDelay` now in seconds instead of millisecond ## Usage ```jsx import React from 'react' import { FloatingWhatsApp } from 'react-floating-whatsapp' export default function App() { return ( ) } ``` ### Props | Prop | Type | Options | Description | Default | | ----------------------- | :-----------: | -------- | ------------------------------------------------------------------------------------------------------------------------- | :----------------------------------: | | `phoneNumber` | String | Required | Phone number in [intenational format](https://faq.whatsapp.com/general/contacts/how-to-add-an-international-phone-number) | `1234567890` | | `accountName` | String | Required | Account username | `Account Name` | | `onClick` | Function | Optional | Callback function fires on click | `-` | | `onSubmit` | Function | Optional | Callback function fires on submit with event and form input value passed | `-` | | `onClose` | Function | Optional | Callback function fires on close | `-` | | `onLoopDone` | Function | Optional | Callback function called when notification loop done | `-` | | `onNotification` | Function | Optional | Callback function fired when notification runs | `-` | | `avatar` | String | Optional | Change user avatar using [static assets](https://create-react-app.dev/docs/adding-images-fonts-and-files/) | `UI Face` | | `statusMessage` | String | Optional | Text below the account username | `Typically replies within 1 hour` | | `chatMessage` | String | Optional | Text inside the chat box. | `Hello there! 🤝 \nHow can we help?` | | `placeholder` | String | Optional | Input placeholder. | `Type a message..` | | `messageDelay` | Number | Optional | Time delay after which the chatMessage is displayed (in seconds). | `2` | | `darkMode` | Boolean | Optional | Dark style. | `false` | | `allowClickAway` | Boolean | Optional | Closes the chat box when user clicks outside | `false` | | `allowEsc` | Boolean | Optional | Closes the chat box when `Escape` key is pressed | `false` | | `className` | String | Optional | CSS className applied to the main wrapping `Div` | `floating-whatsapp` | | `buttonClassName` | String | Optional | CSS className applied to button | `floating-whatsapp-button` | | `style` | CSSProperties | Optional | Inline style applied to the main wrapping `Div` | `{}` | | `buttonStyle` | CSSProperties | Optional | Inline style applied to button | `{}` | | `chatboxHeight` | Number | Optional | Control chat box height | `320` | | `chatboxClassName` | String | Optional | CSS className applied to chat box | `floating-whatsapp-chatbox` | | `chatboxStyle` | CSSProperties | Optional | Inline style applied to chat box | `{}` | | `notification` | Boolean | Optional | Allow notifications (Disabled after user open the chat box) | `false` | | `notificationDelay` | Number | Optional | Time delay between notifications in seconds | `60` | | `notificationSound` | Boolean | Optional | Allow notification sound | `false` | | `notificationSoundSrc` | String | Optional | Notification sound custom src | `-` | | `notificationLoop` | Number | Optional | Repeat notifications loop | `0` | | `notificationStyle` | CSSProperties | Optional | Inline style applied to notification | `-` | | `notificationClassName` | String | Optional | CSS className applied to notification indicator | `floating-whatsapp-notification` |
[![Edit react-floating-whatsapp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-floating-whatsapp-183py) ### License MIT © [awran5](https://github.com/awran5/) --- _Source: https://npm.io/package/react-floating-whatsapp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._