Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdarshHatkar
AdarshHatkar committed Aug 15, 2023
0 parents commit 3050bd5
Show file tree
Hide file tree
Showing 28 changed files with 53,164 additions and 0 deletions.
23 changes: 23 additions & 0 deletions .gitignore
@@ -0,0 +1,23 @@

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules
storybook-static

# builds
build
dist

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
.vercel
9 changes: 9 additions & 0 deletions .npmignore
@@ -0,0 +1,9 @@
src
example
.storybook
storybook-static
.eslintignore
.eslintrc
.prettierrc
tsconfig.json
rollup.*
1 change: 1 addition & 0 deletions .npmrc
@@ -0,0 +1 @@
engine-strict=true
12 changes: 12 additions & 0 deletions .prettierrc
@@ -0,0 +1,12 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"tabWidth": 2,
"printWidth": 120,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"trailingComma": "none",
"endOfLine": "auto"
}
17 changes: 17 additions & 0 deletions .storybook/main.js
@@ -0,0 +1,17 @@
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
{
name: '@storybook/addon-docs',
options: { transcludeMarkdown: true }
}
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5'
}
}
14 changes: 14 additions & 0 deletions .storybook/preview.js
@@ -0,0 +1,14 @@
export const parameters = {
options: {
storySort: {
order: ['Introduction', 'Changelog']
}
},
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
}
Empty file added CHANGELOG.md
Empty file.
22 changes: 22 additions & 0 deletions LICENSE
@@ -0,0 +1,22 @@
The MIT License (MIT)

Copyright (c) 2021-present AdarshHatkar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

88 changes: 88 additions & 0 deletions README.md
@@ -0,0 +1,88 @@
# React Floating Whatsapp

> Simple react component for adding a floating WhatsApp button to your project.
[![NPM](https://img.shields.io/npm/v/react-floating-whatsapp2.svg)](https://www.npmjs.com/package/react-floating-whatsapp2)
![npm bundle size](https://img.shields.io/bundlephobia/min/react-floating-whatsapp2)
![GitHub](https://img.shields.io/github/license/AdarshHatkar/react-floating-whatsapp2)

<p align="center">
<img src="./screenshot.gif" alt="screenshot" width="100%" />
</p>

## Install

#### npm

```bash
npm i react-floating-whatsapp2
```

#### Yarn

```bash
yarn add react-floating-whatsapp2
```

## [v5.0.0](https://github.com/AdarshHatkar/react-floating-whatsapp2/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-whatsapp2'

export default function App() {

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

### 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` |

<br />

[![Edit react-floating-whatsapp2](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-floating-whatsapp2-183py)

### License

MIT © [AdarshHatkar](https://github.com/AdarshHatkar/)

0 comments on commit 3050bd5

Please sign in to comment.