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"
    />
  );
}

Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev
4. Build the package: npm run build
5. Run tests: npm test

License

MIT © [Your Name]