React Router Integration

Name: FeatureDrop
Author: GLINR STUDIOS

Mount FeatureDropProvider above route switching so state survives navigation.

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { LocalStorageAdapter } from 'featuredrop'
import { ChangelogWidget, FeatureDropProvider, Tour } from 'featuredrop/react'
import { manifest } from './featuredrop.manifest'
 
const tourSteps = [
  { id: 'nav', target: '#main-nav', title: 'Navigation', content: 'Find updates in the left nav.' }
]
 
function AppShell() {
  return (
    <FeatureDropProvider
      manifest={manifest}
      storage={new LocalStorageAdapter({ prefix: 'featuredrop' })}
      appVersion={__APP_VERSION__}
    >
      <ChangelogWidget />
      <Tour id="first-session-tour" steps={tourSteps} />
 
      <Routes>
        <Route path="/" element={<DashboardPage />} />
        <Route path="/settings" element={<SettingsPage />} />
      </Routes>
    </FeatureDropProvider>
  )
}
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <AppShell />
  </BrowserRouter>
)

Common mistakes

Mounting provider inside page components (state resets per route)
Recreating adapters every render
Mounting cross-route tours too low in the tree

Use one provider per app shell unless you intentionally need isolated state.

Next.js Analytics