Props Playground

Tweak provider-level options at runtime using setGlobalOptions from the context hook. Changes apply immediately to all sidebars. Open the sidebar and adjust values to see instant feedback.

Live Demo

How It Works

The useSwipeBarContext hook exposes globalOptions (the current values) and setGlobalOptions (merge a partial update). This makes it straightforward to build settings panels:

SettingsPanel.tsx

import { useSwipeBarContext } from "@luciodale/swipe-bar";

function SettingsPanel() {
  const { globalOptions, setGlobalOptions } = useSwipeBarContext();

  return (
    <div>
      <label>
        Transition (ms)
        <input
          type="number"
          value={globalOptions.transitionMs}
          onChange={(e) =>
            setGlobalOptions({ transitionMs: parseInt(e.target.value, 10) })
          }
        />
      </label>

      <label>
        <input
          type="checkbox"
          checked={globalOptions.showOverlay}
          onChange={(e) =>
            setGlobalOptions({ showOverlay: e.target.checked })
          }
        />
        Show Overlay
      </label>
    </div>
  );
}