diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md index 90758ef2..7fc73dbb 100644 --- a/docs/getting-started/configuration.md +++ b/docs/getting-started/configuration.md @@ -79,6 +79,22 @@ function MyApp() { } ``` +### Custom Stores + +You can create custom global stores outside components by instantiating `Store` and passing it to the `useControls` hook: + +```jsx +import { useControls, Store } from 'leva' + +const store = new Store() + +const Example = () => { + const values = useControls({ x: 0 }, { store }) + + return values.x +} +``` + ### Disabling the GUI Each instance of the `useControls` hook will render the panel. If you want to completely disable the GUI based on preferences, you need to explicitly set `hidden` to false. diff --git a/packages/leva/src/index.ts b/packages/leva/src/index.ts index e0da94ee..cdc00131 100644 --- a/packages/leva/src/index.ts +++ b/packages/leva/src/index.ts @@ -36,7 +36,7 @@ export { useStoreContext, LevaStoreProvider } from './context' // export the levaStore (default store) // hook to create custom store -export { levaStore, useCreateStore } from './store' +export { levaStore, useCreateStore, Store } from './store' // export folder, monitor, button export * from './helpers'