React Floating Whatsapp

Simple react component for adding a floating WhatsApp button to your project.

Install

npm

npm i react-floating-whatsapp

Yarn

yarn add react-floating-whatsapp

Changes

• Added: Default Avatar using generated random avatars
• Added: New Prop height that allow to control the chat box height.
• Added: New Prop notification that enable/disable repeated notifications sound and indicators.
• Added: New Prop notificationDelay to set the time delay between notifications in millisecond.
• Added: New Prop notificationSound to allow notifications sound.
• Added: Message typing effect before chatMessage appears.
• Fixed: Chat box css position Thanks to @jpmedeirosmorais and @jorgemndoza
• Modified: Refactor state using useReducer Hook.
• Modified: Prevent toggle open/close the chat box.
• Modified: CSS stylesheet import, now its applied inline.
• Updated: App dependencies
• Added defaultMessage prop to allow for a prefilled message.

Usage

import React from 'react'
import FloatingWhatsApp from 'react-floating-whatsapp'

export default function App() {

  return (
      <FloatingWhatsApp {/*  Props  */} />
  )
}

Props

| Prop | Type | Options | Description | Default | | ------------------- | :-----------: | -------- | ------------------------------------------------------------------------------------------------------------------------- | :----------------------------------: | | phoneNumber | String | Required | Phone number in intenational format | 1234567890 | | accountName | String | Required | Account username | Account Name | | avatar | String | Optional | Change user avatar using static assets | UI Faces | | 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.. | | 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 | custom-class | | styles | CSSProperties | Optional | Inline style applied to the Button only | {} | | height | Number | Optional | Control chat box height | 300 | | notification | Boolean | Optional | Allow repeated notifications (Disabled after user opens the chat box) | false | | notificationDelay | Number | Optional | Time delay between notifications in millisecond | 18000 | | notificationSound | Boolean | Optional | Allow notification sound | false | | defaultMessage | String | Optional | A default prefilled message. | Hello, I have a query |

License

MIT © awran5