live-pulse-react

🚧 Private NPM Package – Access restricted to authorized users.

This package provides a FomoBanner component that automatically displays live notifications with three types of banners:

1. ChallengePurchaseBanner - Shows challenge purchases
2. PayoutBanner - Shows payout notifications
3. StaticBanner - Shows custom static content

✨ Key Features

• 🔄 Auto-rotating notifications with configurable timing
• 🎨 Built-in Tailwind CSS v4 styles - No additional CSS setup required!
• 📱 Responsive design with custom breakpoints
• 🎭 Smooth animations using Framer Motion
• 📊 Analytics tracking with PostHog integration
• 🌙 Dark mode support built-in

🚀 Installation & Usage

npm install @netdesignr_official/live-pulse-react

Basic Usage (Styles Auto-Applied!)

import { FomoBanner } from '@netdesignr_official/live-pulse-react';

function App() {
  const bannerConfig = {
    settings: {
      branding: {
        checkIcon: {
          alt: "Check Icon",
          url: "/path/to/check-icon.svg"
        }
      },
      notifications: {
        displayEachNotificationFor: 10, // seconds
        delayBetweenNotifications: 60,  // seconds
        showFirstNotificationDelay: 10  // seconds
      }
    },
    sampleData: {
      countries: [
        {
          country: "India",
          users: ["Ananya", "Amir", "Anika", "Diya", "Ishika"],
          image: {
            url: "./assets/maps/india.png",
            alt: "India"
          }
        }
      ],
      bannerTypes: {
        purchase: ["1-Step", "2-Step", "2-Step News", "3-Step"],
        payout: ["$1K", "$2K", "$5K", "$10K"]
      }
    }
  };

  return <FomoBanner {...bannerConfig} />;
}

Static Banner Usage

const staticConfig = {
  settings: {
    branding: {
      checkIcon: {
        alt: "Check Icon",
        url: "/check-icon.svg"
      }
    },
    notifications: {
      displayEachNotificationFor: 10,
      delayBetweenNotifications: 60,
      showFirstNotificationDelay: 10
    }
  },
  staticBannerTypes: [
    {
      title: "Special offer just for you!",
      image: {
        alt: "Offer Image",
        url: "https://example.com/offer.jpg"
      },
      link: "https://example.com/offer"
    }
  ]
};

🎨 Styles & Styling

✅ Styles Auto-Applied!

This package automatically includes all necessary styles - no additional CSS imports needed!

What's Included:

• ✅ Tailwind CSS v4 utilities
• ✅ Custom responsive breakpoints (vsmll:, smll:, smll2:)
• ✅ Custom color variables and shadows
• ✅ Dark mode support
• ✅ Responsive design utilities

Custom Breakpoints:

• vsmll: - 370px and up
• smll: - 400px and up
• smll2: - 490px and up

Custom Styling (Optional)

If you want to override styles, you can import the CSS separately:

import '@netdesignr_official/live-pulse-react/styles';

📱 Responsive Design

The banner automatically adapts to different screen sizes:

• Mobile: Optimized for small screens
• Tablet: Enhanced spacing and layout
• Desktop: Full-width display with optimal spacing

🌙 Dark Mode Support

Built-in dark mode with automatic detection:

• Light theme: White background with dark text
• Dark theme: Dark background (#232323) with white text

📊 Analytics Integration

Automatic tracking of user interactions:

• banner_hover - When user hovers over banner
• banner_leave - When user stops hovering
• banner_click - When user clicks the banner

🔧 Configuration Options

Notification Settings

• displayEachNotificationFor: How long each notification shows (seconds)
• delayBetweenNotifications: Delay between notifications (seconds)
• showFirstNotificationDelay: Initial delay before first notification (seconds)

Branding

• checkIcon: Custom icon for "by LivePulse" text
• color: Primary brand color
• icon: Brand logo/icon

📦 Package Contents

lib/
├── index.js          # Main component bundle
├── styles.css        # All styles (auto-included)
├── index.d.ts        # TypeScript definitions
├── components/       # Component type definitions
├── types/           # TypeScript interfaces
└── utils/           # Utility function types

🆚 Version Compatibility

• React: 19.x
• Tailwind CSS: 4.x (optional - styles are bundled)
• TypeScript: 5.x
• Node.js: 18.x+

🔒 Access

This is a private npm package. To install and use it, you must:

1. Be logged in to your npm account
2. Have access granted by the netdesignr_official organization

📄 Data Structure Examples

See the original README for detailed data structure examples.

Made with ❤️ using React 19, TypeScript, Framer Motion, and Tailwind CSS v4