React Changelog Widget

A plug-and-play notification bell and popover to display your app's release notes.

Installation

npm install react-changelog-widget

Usage

import { ChangelogWidget } from 'react-changelog-widget';

function App() {
  return (
    <ChangelogWidget 
      feedUrl="https://yoursite.com/changelog.json" // Required: URL to your JSON feed, or a local public path (e.g., '/changelog.json')
      theme="light"                                 // Optional: 'light' | 'dark' (default: 'light')
      primaryColor="#4F46E5"                        // Optional: Hex color for tags (default: '#4F46E5')
      iconColor="#374151"                           // Optional: Hex color for the bell icon (defaults to text color)
      iconSize={24}                                 // Optional: Size of the bell icon in pixels (default: 24)
      className="my-custom-class"                   // Optional: Custom CSS class for the wrapper div
    />
  );
}

Data Format

Your feedUrl should return a JSON array matching this structure:

[
  {
    "id": "v1.2.0",
    "title": "Dark Mode is Here! 🌙",
    "date": "2026-06-20T10:00:00Z",
    "description": "You can now toggle dark mode in your profile settings.",
    "tag": "Feature",
    "link": "[https://yoursite.com/release-notes/v1-2-0](https://yoursite.com/release-notes/v1-2-0)" 
  }
]