React-floating-bubble NPM

React Floating Bubble

A customizable floating bubble component for React applications, similar to Intercom's messenger bubble. Built with React, TypeScript, and Tailwind CSS.

Features

🎨 Fully customizable appearance
📱 Responsive design
🎯 Multiple position options
🔔 Notification badge support
✨ Smooth animations
🎁 Custom icon support
💬 Tooltip support
📦 TypeScript support
🎯 ESM and CommonJS support

Installation

npm install react-floating-bubble
# or
yarn add react-floating-bubble

Usage

import { Bubble } from 'react-floating-bubble';

function App() {
  return (
    <Bubble
      position="bottom-right"
      color="#0084ff"
      size={56}
      tooltip="Need help?"
      showBadge
      badgeCount={3}
      onClick={() => console.log('Bubble clicked!')}
    >
      <div>
        <h3 className="text-lg font-bold">Hello there! 👋</h3>
        <p className="mt-2">How can we help you today?</p>
      </div>
    </Bubble>
  );
}

Props

Prop	Type	Default	Description
position	'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'	'bottom-right'	Position of the bubble on the screen
size	number	56	Size of the bubble in pixels
color	string	'#0084ff'	Primary color of the bubble
icon	React.ReactNode	undefined	Custom icon to display in the bubble
tooltip	string	undefined	Text to display when hovering over the bubble
showBadge	boolean	false	Whether to show a notification badge
badgeCount	number	0	Number to display in the notification badge
className	string	''	Custom CSS class names
animate	boolean	true	Whether to use subtle bounce animation
onClick	() => void	undefined	Click handler for the bubble
children	React.ReactNode	undefined	Content to display in the popover

Examples

Custom Icon

import { Bubble } from 'react-floating-bubble';

function App() {
  return (
    <Bubble
      icon={
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
          />
        </svg>
      }
      color="#00c853"
    />
  );
}

With Notification Badge

import { Bubble } from 'react-floating-bubble';

function App() {
  return (
    <Bubble
      showBadge
      badgeCount={5}
      position="bottom-left"
      tooltip="You have 5 new messages"
    />
  );
}