diff --git a/packages/playground/src/r3f/App.tsx b/packages/playground/src/r3f/App.tsx
index b020777..51f435c 100644
--- a/packages/playground/src/r3f/App.tsx
+++ b/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
>
- getProject('Playground - R3F').sheet('R3F-Canvas')}
>
{/* @ts-ignore */}
@@ -140,7 +140,7 @@ function App() {
/>
-
+
)
diff --git a/packages/playground/src/space-exploration/App.tsx b/packages/playground/src/space-exploration/App.tsx
index bd4881a..90e7bd5 100644
--- a/packages/playground/src/space-exploration/App.tsx
+++ b/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 (
setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)}>
)
diff --git a/packages/plugin-r3f/src/Wrapper.tsx b/packages/plugin-r3f/src/SheetProvider.tsx
similarity index 66%
rename from packages/plugin-r3f/src/Wrapper.tsx
rename to packages/plugin-r3f/src/SheetProvider.tsx
index 0410690..3515a61 100644
--- a/packages/plugin-r3f/src/Wrapper.tsx
+++ b/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 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 {props.children}
}
-export default Wrapper
+export default SheetProvider
diff --git a/packages/plugin-r3f/src/components/editable.tsx b/packages/plugin-r3f/src/components/editable.tsx
index 4aa69c0..bff0d5e 100644
--- a/packages/plugin-r3f/src/components/editable.tsx
+++ b/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()
- const wrapperContext = useWrapperContext()
- if (!wrapperContext) {
- throw new Error(
- `Editable components must be a descendent of a `,
- )
- }
-
- const {sheet} = wrapperContext
+ const sheet = useCurrentSheet()
const [sheetObject, setSheetObject] = useState<
undefined | ISheetObject<$FixMe>
diff --git a/packages/plugin-r3f/src/index.tsx b/packages/plugin-r3f/src/index.tsx
index f94ce54..661807a 100644
--- a/packages/plugin-r3f/src/index.tsx
+++ b/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'