LaunchDarkly developer toolbar

1
import { render } from 'react-dom';
2
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
3
import { 
4
  useLaunchDarklyToolbar, 
5
  FlagOverridePlugin, 
6
  EventInterceptionPlugin 
7
} from '@launchdarkly/toolbar';
8
9
// Pass the same instance of these plugins into both the LaunchDarkly
10
// React client as well as the developer toolbar
11
const flagOverridePlugin = new FlagOverridePlugin();
12
const eventInterceptionPlugin = new EventInterceptionPlugin();
13
14
(async () => {
15
  const LDProvider = await asyncWithLDProvider({
16
    clientSideID: 'client-side-id-123abc',
17
    context: {
18
      kind: 'user',
19
      key: 'user-key-123abc',
20
      name: 'Sandy Smith',
21
      email: 'sandy@example.com',
22
    },
23
    options: {
24
      plugins: [
25
        flagOverridePlugin,
26
        eventInterceptionPlugin,
27
        // other plugins...
28
      ],
29
      // other options...
30
    },
31
  });
32
33
  function App() {
34
    // Initialize toolbar with the same plugin instances
35
    useLaunchDarklyToolbar({
36
      flagOverridePlugin, // For flag overrides (SDK Mode only)
37
      eventInterceptionPlugin, // For event monitoring (works in both modes)
38
39
      // OR Dev Server Mode: Connect to LaunchDarkly dev server
40
      devServerUrl: 'http://localhost:8080',
41
      projectKey: 'my-project', // Optional: auto-detects if not provided
42
43
      // Common options
44
      position: 'bottom-right',
45
      enabled: process.env.NODE_ENV === 'development' // disable in production/hosted environments
46
    });
47
48
    return <YourApp />;
49
  }
50
51
  render(
52
    <LDProvider>
53
      <App />
54
    </LDProvider>,
55
    document.getElementById('root'),
56
  );
57
})();

1
<script src="https://unpkg.com/@launchdarkly/toolbar@latest/cdn/toolbar.min.js"></script>

1
import * as LDClient from 'launchdarkly-js-client-sdk';
2
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar';
3
4
// Pass these plugins into both the JS client and 
5
// the window.LaunchDarklyToolbar.init() call.
6
const flagOverridePlugin = new FlagOverridePlugin();
7
const eventInterceptionPlugin = new EventInterceptionPlugin();
8
9
const context: LDClient.LDContext = {
10
  kind: 'user',
11
  key: 'context-key-123abc',
12
};
13
14
const client = LDClient.initialize('client-side-id-123abc', context, {
15
  plugins: [
16
    flagOverridePlugin,
17
    eventInterceptionPlugin,
18
    // other plugins...
19
  ],
20
  // other options...
21
});
22
23
try {
24
  await client.waitForInitialization(5);
25
  // initialization succeeded, flag values are now available
26
  handleInitializedClient(client);
27
} catch (err) {
28
  // initialization failed or did not complete before timeout
29
}
30
31
// Only initialize the toolbar in local environments
32
if (process.env.NODE_ENV === 'development' && window.LaunchDarklyToolbar) {
33
  window.LaunchDarklyToolbar.init({
34
    flagOverridePlugin,
35
    eventInterceptionPlugin,
36
    // other toolbar options...
37
  });
38
}

1
import type { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
2
3
declare global {
4
  interface Window {
5
    LaunchDarklyToolbar?: LaunchDarklyToolbar;
6
  }
7
}

1
import { useEffect, useState } from 'react';
2
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
3
import { 
4
  LaunchDarklyToolbar,
5
  FlagOverridePlugin,
6
  EventInterceptionPlugin 
7
} from '@launchdarkly/toolbar';
8
9
// Create the plugin instances
10
const flagOverridePlugin = new FlagOverridePlugin({
11
  storageNamespace: 'my-app-overrides', // Optional: customize storage key
12
});
13
const eventInterceptionPlugin = new EventInterceptionPlugin({
14
  eventCapacity: 250, // Maximum events to store (default: 150)
15
  enableLogging: true, // Console logging for debugging (default: false)
16
});
17
18
function App() {
19
  const [LDProvider, setLDProvider] = useState(null);
20
21
  useEffect(() => {
22
    const initializeLD = async () => {
23
      const Provider = await asyncWithLDProvider({
24
        clientSideID: 'enter-your-client-side-id',
25
        context: { key: 'context-key-123abc', name: 'Sandy Smith' },
26
        options: {
27
          // Pass the plugins to the SDK
28
          plugins: [flagOverridePlugin, eventInterceptionPlugin],
29
        },
30
      });
31
      setLDProvider(() => Provider);
32
    };
33
34
    initializeLD();
35
  }, []);
36
37
  if (!LDProvider) {
38
    return <div>Loading LaunchDarkly...</div>;
39
  }
40
41
  return (
42
    <LDProvider>
43
      <div>
44
        <h1>My App</h1>
45
        {/* Pass the same plugin instances to the toolbar */}
46
        <LaunchDarklyToolbar
47
          flagOverridePlugin={flagOverridePlugin}
48
          eventInterceptionPlugin={eventInterceptionPlugin}
49
        />
50
      </div>
51
    </LDProvider>
52
  );
53
}

$
ldcli dev-server start --project your-project --cors-enabled true

1
import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
2
3
function App() {
4
  return (
5
    <div>
6
      <h1>My App</h1>
7
      <LaunchDarklyToolbar devServerUrl="http://localhost:8765" />
8
    </div>
9
  );
10
}

1
// Toggle visibility
2
window.ldToolbar.toggle();
3
4
// Enable/disable explicitly
5
window.ldToolbar.enable();
6
window.ldToolbar.disable();
7
8
// Check current status
9
window.ldToolbar.status(); // returns true/false