Core Architecture

FeatureDrop is a library, not a hosted platform.

You own rendering, storage, and analytics.

Data Flow

Pass manifest + storage to <FeatureDropProvider>.
Provider reads user state (watermark, dismissed IDs).
Provider evaluates all visibility rules.
Components/hooks consume computed state from context.
Interactions emit analytics callbacks/collector events.

Provider Evaluation Loop

Read persistence

Loads state from your StorageAdapter.

Evaluate gates

Checks audience (userContext), semver (appVersion), flags, product scope, dependency rules, triggers, and time windows (publishAt / showNewUntil).

Publish context state

Exposes newFeatures, newCount, isNew(sidebarKey), dismiss, dismissAll, and orchestration helpers.

Headless customization example

CustomChangelog.tsx

import { ChangelogWidget } from 'featuredrop/react'
 
<ChangelogWidget>
  {({ isOpen, toggle, features, count, dismiss }) => (
    <div className="my-ui">
      <button onClick={toggle}>Updates ({count})</button>
      {isOpen && (
        <ul>
          {features.map((f) => (
            <li key={f.id}>
              {f.label}
              <button onClick={() => dismiss(f.id)}>Dismiss</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )}
</ChangelogWidget>

⚠️

Keep a single React instance in your workspace. Duplicate React copies cause hook/context errors.

Quickstart Manifest Model