r3f sheets are now re-usable

packages/plugin-r3f/src/SheetProvider.tsx

@@ -10,13 +10,21 @@ import {bindToCanvas} from './store'
 
 const ctx = createContext<{sheet: ISheet | undefined} | undefined>(undefined)
 
-export const useWrapperContext = ():
-  | {sheet: ISheet | undefined}
-  | undefined => {
-  return useContext(ctx)
+const useWrapperContext = (): {sheet: ISheet | undefined} => {
+  const val = useContext(ctx)
+  if (!val) {
+    throw new Error(
+      `No sheet found. You need to add a <SheetProvider> higher up in the tree. https://docs.theatrejs.com/r3f.html#sheetprovider`,
+    )
+  }
+  return val
 }
 
-const Wrapper: React.FC<{
+export const useCurrentSheet = (): ISheet | undefined => {
+  return useWrapperContext().sheet
+}
+
+const SheetProvider: React.FC<{
   getSheet: () => ISheet
 }> = (props) => {
   const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
@@ -36,4 +44,4 @@ const Wrapper: React.FC<{
   return <ctx.Provider value={{sheet}}>{props.children}</ctx.Provider>
 }
 
-export default Wrapper
+export default SheetProvider

packages/plugin-r3f/src/components/editable.tsx

@@ -18,7 +18,7 @@ import mergeRefs from 'react-merge-refs'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import type {ISheetObject} from '@theatre/core'
 import useInvalidate from './useInvalidate'
-import {useWrapperContext} from '../Wrapper'
+import {useCurrentSheet} from '../SheetProvider'
 
 interface Elements {
   group: Group
@@ -51,14 +51,7 @@ const editable = <
     ({uniqueName, visible, editableType, ...props}: Props, ref) => {
       const objectRef = useRef<Elements[U]>()
 
-      const wrapperContext = useWrapperContext()
-      if (!wrapperContext) {
-        throw new Error(
-          `Editable components must be a descendent of a <Wrapper>`,
-        )
-      }
-
-      const {sheet} = wrapperContext
+      const sheet = useCurrentSheet()
 
       const [sheetObject, setSheetObject] = useState<
         undefined | ISheetObject<$FixMe>

packages/plugin-r3f/src/index.tsx

@@ -3,6 +3,6 @@ export {default as EditorHelper} from './components/EditorHelper'
 export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
 export type {EditableState, BindFunction} from './store'
-export {default as Wrapper} from './Wrapper'
+export {default as SheetProvider, useCurrentSheet} from './SheetProvider'
 export {default as useRefreshSnapshot} from './components/useRefreshSnapshot'
 export {default as RefreshSnapshot} from './components/RefreshSnapshot'