feat: useControls returns a get function (#374)

.changeset/bright-moose-tap.md

@@ -0,0 +1,5 @@
+---
+'leva': minor
+---
+
+feat: `useControls` returns a `get` function

packages/leva/src/useControls.ts

@@ -12,8 +12,9 @@ type SchemaOrFn<S extends Schema = Schema> = S | (() => S)
 type FunctionReturnType<S extends Schema> = [
   SchemaToValues<S>,
   (value: {
-    [K in keyof Partial<SchemaToValues<S, true>>]: any
-  }) => void
+    [K in keyof Partial<SchemaToValues<S, true>>]: SchemaToValues<S, true>[K]
+  }) => void,
+  <T extends keyof SchemaToValues<S, true>>(path: T) => SchemaToValues<S, true>[T]
 ]
 
 type ReturnType<F extends SchemaOrFn> = F extends SchemaOrFn<infer S>
@@ -179,6 +180,8 @@ export function useControls<S extends Schema, F extends SchemaOrFn<S> | string,
     [store, mappedPaths]
   )
 
+  const get = useCallback((path: string) => store.get(mappedPaths[path].path), [store, mappedPaths])
+
   useEffect(() => {
     // We initialize the store with the initialData in useEffect.
     // Note that doing this while rendering (ie in useMemo) would make
@@ -225,6 +228,6 @@ export function useControls<S extends Schema, F extends SchemaOrFn<S> | string,
     return () => unsubscriptions.forEach((unsub) => unsub())
   }, [onEditStartPaths, onEditEndPaths, store])
 
-  if (schemaIsFunction) return [values, set] as any
+  if (schemaIsFunction) return [values, set, get] as any
   return values as any
 }

packages/leva/stories/controlled-inputs.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
-import { ComponentPropsWithoutRef, forwardRef, useRef } from 'react'
-import { useDrag } from '@use-gesture/react'
 import { Meta, Story } from '@storybook/react'
+import { useDrag } from '@use-gesture/react'
+import React, { ComponentPropsWithoutRef, forwardRef, useRef } from 'react'
 import Reset from './components/decorator-reset'
 
-import { useControls } from '../src'
+import { folder, useControls } from '../src'
 
 export default {
   title: 'Misc/Controlled inputs',
@@ -31,6 +30,51 @@ export const ExternalUpdatesWithSet: Story = () => {
   )
 }
 
+export const ExternalUpdatesWithGetAndSet: Story = () => {
+  const [{ counter }, set, get] = useControls(() => ({ counter: 0 }))
+  const [{ counter: counter2, counterB }, set2, get2] = useControls('folder', () => ({
+    counter: 0,
+    folder2: folder({
+      counterB: 0,
+    }),
+  }))
+
+  const onClick = () => {
+    set({ counter: get('counter') + 1 })
+  }
+
+  const onClick2 = () => {
+    set2({ counter: get2('counter') + 1 })
+  }
+
+  const onClick3 = () => {
+    set2({ counterB: get2('counterB') + 1 })
+  }
+
+  return (
+    <form style={formStyles}>
+      <label>
+        counter: {counter}{' '}
+        <button type="button" onClick={onClick}>
+          ➕ inc
+        </button>
+      </label>
+      <label>
+        folder.counter: {counter2}{' '}
+        <button type="button" onClick={onClick2}>
+          ➕ inc
+        </button>
+      </label>
+      <label>
+        folder.folder2.counterB: {counterB}{' '}
+        <button type="button" onClick={onClick3}>
+          ➕ inc
+        </button>
+      </label>
+    </form>
+  )
+}
+
 const Circle = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>((props, ref) => {
   return (
     <div