@logg-sh/react

React components for a logg changelog: a timeline and a what's-new bell that dress in your site's clothes.

• Adaptive by default — reads your shadcn CSS variables, so it ships themed without configuration
• Two components, two hooks — a full timeline, a corner bell, and the raw data if you'd rather render it yourself
• Zero config — one slug, nothing else required; works with any React 18+ app, client components ready for RSC apps

npm install @logg-sh/react

import { Changelog, ChangelogNotification } from "@logg-sh/react";
import "@logg-sh/react/styles.css";

// The full record as a timeline
<Changelog slug="my-project" maxEntries={10} />

// A quiet corner bell that lights up when something new shipped
<ChangelogNotification slug="my-project" position="bottom-right" />

<Changelog />

| Prop | Type | Default | What it does | | ----------------- | --------------------------------------- | ------------ | -------------------------------------------------------- | | slug | string | — (required) | The project's slug at logg.sh | | tracking | boolean | false | Opt in to aggregate interaction reporting; honors DNT/GPC | | maxEntries | number | all | How many entries to show at all | | expandedCount | number | 5 | How many entries start expanded; the rest open on click | | defaultAudience | string | — | Pre-select one audience filter chip | | theme | "adaptive" \| "logg" | "adaptive" | Inherit your site's variables, or logg's obsidian look | | className | string | — | Extra classes on the root | | renderEntry | (entry: ChangelogEntry) => ReactNode | — | Take over rendering of a whole entry |

<ChangelogNotification />

| Prop | Type | Default | What it does | | ----------- | ----------------------------------------------------------------- | ---------------- | --------------------------------------------- | | slug | string | — (required) | The project's slug | | tracking | boolean | false | Opt in to aggregate interaction reporting; honors DNT/GPC | | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | "bottom-right" | Which corner the bell lives in | | theme | "adaptive" \| "logg" | "adaptive" | Same theming as the timeline | | className | string | — | Extra classes on the root | | children | ReactNode | — | Your own trigger; the dot and popover remain |

The bell remembers what a visitor has already seen and only lights up for genuinely new entries.

Both components default to no interaction reporting. Only tracking={true} enables aggregate events for visible release markers, bell opens and release action clicks. Omitting the prop or passing false sends no interaction events; the public changelog is still fetched to display it. Do Not Track and Global Privacy Control suppress reporting even when enabled. No visitor identifier or arbitrary properties are sent.

<Changelog slug="my-project" tracking={true} />
<ChangelogNotification slug="my-project" tracking={true} />

The bell's existing local-storage version marker still remembers seen releases when reporting is off. It is only for the unread dot, not an analytics identity. Custom renderEntry markup owns its own visibility and action instrumentation. Older API payloads without action links continue to render.

The script widget also defaults to no reporting. Only data-tracking="true" opts in; omitted attributes and data-tracking="false" send no interaction events. Existing tags do not need changing to keep reporting off. Embed Studio has a default-off control and generates snippets with your choice stated explicitly. See the changelog for the 0.4.0 migration notes.

Hooks

Prefer your own markup? The data comes ready:

import { useChangelog, useLatestChangelog } from "@logg-sh/react";

const { data, loading, error } = useChangelog("my-project");
const { data: latest, isNew, markSeen } = useLatestChangelog("my-project");

Theming

By default every color reads your site's shadcn variables (--foreground, --border, --card, …) with dark fallbacks, so the widget adopts your theme without configuration. Override any of the --logg-* variables to fine-tune, or pass theme="logg" for logg's own obsidian look.

License

MIT © Erkan Doğan