{"id":22432333,"url":"https://github.com/normalhuman01/react-floating-icon-wsp","last_synced_at":"2025-03-27T07:42:02.855Z","repository":{"id":212347131,"uuid":"731290873","full_name":"normalhuman01/react-floating-icon-wsp","owner":"normalhuman01","description":"a simple react component for adding a floating whatsApp button to your project","archived":false,"fork":false,"pushed_at":"2023-12-13T18:50:26.000Z","size":1282,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T12:45:35.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/normalhuman01.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-13T18:48:59.000Z","updated_at":"2023-12-13T18:50:29.000Z","dependencies_parsed_at":"2023-12-13T21:03:36.757Z","dependency_job_id":null,"html_url":"https://github.com/normalhuman01/react-floating-icon-wsp","commit_stats":null,"previous_names":["normalhuman01/react-floating-icon-wsp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/normalhuman01%2Freact-floating-icon-wsp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/normalhuman01%2Freact-floating-icon-wsp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/normalhuman01%2Freact-floating-icon-wsp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/normalhuman01%2Freact-floating-icon-wsp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/normalhuman01","download_url":"https://codeload.github.com/normalhuman01/react-floating-icon-wsp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245806006,"owners_count":20675291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-05T22:11:30.712Z","updated_at":"2025-03-27T07:42:02.831Z","avatar_url":"https://github.com/normalhuman01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Floating Whatsapp\n\n\u003e Simple react component for adding a floating WhatsApp button to your project.\n\n[![NPM](https://img.shields.io/npm/v/react-floating-whatsapp.svg)](https://www.npmjs.com/package/react-floating-whatsapp)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-floating-whatsapp)\n![GitHub](https://img.shields.io/github/license/awran5/react-floating-whatsapp)\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"./screenshot.gif\" alt=\"screenshot\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n#### npm\n\n```bash\nnpm i react-floating-whatsapp\n```\n\n#### Yarn\n\n```bash\nyarn add react-floating-whatsapp\n```\n\n## [v5.0.0](https://github.com/awran5/react-floating-whatsapp/compare/v4.0.5...v5.0.0) - 2022-10-07\n\n- **BREAKING CHANGES:** change **default** import to **name** import\n- **BREAKING CHANGES:** rename `height` prop to `chatboxHeight`\n- **BREAKING CHANGES:** rename `styles` prop to `style`\n- **BREAKING CHANGES:** `notificationDelay` now in seconds instead of millisecond\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { FloatingWhatsApp } from 'react-floating-whatsapp'\n\nexport default function App() {\n\n return (\n \u003cFloatingWhatsApp {/* Props */} /\u003e\n )\n}\n```\n\n### Props\n\n| Prop | Type | Options | Description | Default |\n| ----------------------- | :-----------: | -------- | ------------------------------------------------------------------------------------------------------------------------- | :----------------------------------: |\n| `phoneNumber` | String | Required | Phone number in [intenational format](https://faq.whatsapp.com/general/contacts/how-to-add-an-international-phone-number) | `1234567890` |\n| `accountName` | String | Required | Account username | `Account Name` |\n| `onClick` | Function | Optional | Callback function fires on click | `-` |\n| `onSubmit` | Function | Optional | Callback function fires on submit with event and form input value passed | `-` |\n| `onClose` | Function | Optional | Callback function fires on close | `-` |\n| `onLoopDone` | Function | Optional | Callback function called when notification loop done | `-` |\n| `onNotification` | Function | Optional | Callback function fired when notification runs | `-` |\n| `avatar` | String | Optional | Change user avatar using [static assets](https://create-react-app.dev/docs/adding-images-fonts-and-files/) | `UI Face` |\n| `statusMessage` | String | Optional | Text below the account username | `Typically replies within 1 hour` |\n| `chatMessage` | String | Optional | Text inside the chat box. | `Hello there! 🤝 \\nHow can we help?` |\n| `placeholder` | String | Optional | Input placeholder. | `Type a message..` |\n| `messageDelay` | Number | Optional | Time delay after which the chatMessage is displayed (in seconds). | `2` |\n| `darkMode` | Boolean | Optional | Dark style. | `false` |\n| `allowClickAway` | Boolean | Optional | Closes the chat box when user clicks outside | `false` |\n| `allowEsc` | Boolean | Optional | Closes the chat box when `Escape` key is pressed | `false` |\n| `className` | String | Optional | CSS className applied to the main wrapping `Div` | `floating-whatsapp` |\n| `buttonClassName` | String | Optional | CSS className applied to button | `floating-whatsapp-button` |\n| `style` | CSSProperties | Optional | Inline style applied to the main wrapping `Div` | `{}` |\n| `buttonStyle` | CSSProperties | Optional | Inline style applied to button | `{}` |\n| `chatboxHeight` | Number | Optional | Control chat box height | `320` |\n| `chatboxClassName` | String | Optional | CSS className applied to chat box | `floating-whatsapp-chatbox` |\n| `chatboxStyle` | CSSProperties | Optional | Inline style applied to chat box | `{}` |\n| `notification` | Boolean | Optional | Allow notifications (Disabled after user open the chat box) | `false` |\n| `notificationDelay` | Number | Optional | Time delay between notifications in seconds | `60` |\n| `notificationSound` | Boolean | Optional | Allow notification sound | `false` |\n| `notificationSoundSrc` | String | Optional | Notification sound custom src | `-` |\n| `notificationLoop` | Number | Optional | Repeat notifications loop | `0` |\n| `notificationStyle` | CSSProperties | Optional | Inline style applied to notification | `-` |\n| `notificationClassName` | String | Optional | CSS className applied to notification indicator | `floating-whatsapp-notification` |\n\n\u003cbr /\u003e\n\n[![Edit react-floating-whatsapp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-floating-whatsapp-183py)\n\n### License\n\nMIT © [awran5](https://github.com/awran5/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormalhuman01%2Freact-floating-icon-wsp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormalhuman01%2Freact-floating-icon-wsp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormalhuman01%2Freact-floating-icon-wsp/lists"}