@harisenin/react-floating-whatsapp NPM

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

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`