React-floating-whatsapp2 NPM

React Floating Whatsapp2

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

npm bundle size GitHub

Install

npm

npm i react-floating-whatsapp2

Yarn

yarn add react-floating-whatsapp2

Usage

import React from 'react'
import { FloatingWhatsApp } from 'react-floating-whatsapp2'

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`
`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	`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`
`openChatOnClick`	Boolean	Optional	open the chat box if clicked on whatsApp icon	`true`
`allowDefaultSubmit`	Boolean	Optional	Allow default submit behavior of redirecting to whatsApp on submit	`true`
`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`

Credits

awran5

i forked this project because owner is inactive from last many months also need some extra functionality and more stability

License

MIT © AdarshHatkar

react whatsapp floating whatsapp button floating whatsapp button 2 whatsapp button react component react typescript

@everything-registry/sub-chunk-2555

1.0.3

9 months ago

1.0.2

9 months ago

1.0.1

9 months ago