r3f sheets are now re-usable

packages/playground/src/r3f/App.tsx

@@ -1,4 +1,4 @@
-import {editable as e, Wrapper} from '@theatre/plugin-r3f'
+import {editable as e, SheetProvider} from '@theatre/plugin-r3f'
 import {getProject} from '@theatre/core'
 import * as THREE from 'three'
 import React, {useState, useEffect, useRef} from 'react'
@@ -90,7 +90,7 @@ function App() {
         // @ts-ignore
         shadowMap
       >
-        <Wrapper
+        <SheetProvider
           getSheet={() => getProject('Playground - R3F').sheet('R3F-Canvas')}
         >
           {/* @ts-ignore */}
@@ -140,7 +140,7 @@ function App() {
             />
           </group>
           <Button />
-        </Wrapper>
+        </SheetProvider>
       </Canvas>
     </div>
   )

packages/playground/src/space-exploration/App.tsx

@@ -1,7 +1,7 @@
 import {
   editable as e,
   RefreshSnapshot,
-  Wrapper,
+  SheetProvider,
   extension,
 } from '@theatre/plugin-r3f'
 import {OrbitControls, Stars} from '@react-three/drei'
@@ -61,7 +61,7 @@ function App() {
   return (
     <div onClick={() => setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)}>
       <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
-        <Wrapper getSheet={() => getProject('Space').sheet('Scene')}>
+        <SheetProvider getSheet={() => getProject('Space').sheet('Scene')}>
           <fog attach="fog" args={[bg, 16, 30]} />
           <color attach="background" args={[bg]} />
           <ambientLight intensity={0.75} />
@@ -99,7 +99,7 @@ function App() {
             minPolarAngle={Math.PI / 2}
           />
           <Stars radius={500} depth={50} count={1000} factor={10} />
-        </Wrapper>
+        </SheetProvider>
       </Canvas>
     </div>
   )

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 = ():
+const useWrapperContext = (): {sheet: ISheet | undefined} => {
-  | {sheet: ISheet | undefined}
+  const val = useContext(ctx)
-  | undefined => {
+  if (!val) {
-  return useContext(ctx)
+    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()
+      const sheet = useCurrentSheet()
-      if (!wrapperContext) {
-        throw new Error(
-          `Editable components must be a descendent of a <Wrapper>`,
-        )
-      }
-
-      const {sheet} = wrapperContext
 
       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'