feat: Sandpack component (#296)

docs/getting-started/authoring.mdx

@@ -59,6 +59,112 @@ Responsive grid.
 
 </details>
 
+#### `Sandpack`
+
+See https://sandpack.codesandbox.io/docs/getting-started/usage.
+
+```tsx
+<Sandpack
+ template="react"
+ customSetup={{
+ dependencies: {
+ '@react-three/fiber': 'latest',
+ three: 'latest',
+ },
+ }}
+ files={{
+ '/Box.js': `import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+export function Box(props) {
+ const meshRef = useRef()
+ const [hovered, setHover] = useState(false)
+ const [active, setActive] = useState(false)
+ useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+
+ return (
+ <mesh
+ {...props}
+ ref={meshRef}
+ scale={active ? 1.5 : 1}
+ onClick={(event) => setActive(!active)}
+ onPointerOver={(event) => setHover(true)}
+ onPointerOut={(event) => setHover(false)}>
+ <boxGeometry args={[1, 1, 1]} />
+ <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+ </mesh>
+ )
+}`,
+ '/App.js': `import { Canvas } from '@react-three/fiber'
+import {Box} from './Box'
+
+export default function App() {
+ return (
+ <Canvas>
+ <ambientLight intensity={Math.PI / 2} />
+ <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+ <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+ <Box position={[-1.2, 0, 0]} />
+ <Box position={[1.2, 0, 0]} />
+ </Canvas>
+ )
+}`,
+ }}
+/>
+```
+
+<details>
+ <summary>Result</summary>
+
+<Sandpack template="react"
+ customSetup={{
+ dependencies: {
+ '@react-three/fiber': 'latest',
+ three: 'latest',
+ },
+ }}
+ files={{
+ '/Box.js': `import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+export function Box(props) {
+ const meshRef = useRef()
+ const [hovered, setHover] = useState(false)
+ const [active, setActive] = useState(false)
+ useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+
+return (
+<mesh
+{...props}
+ref={meshRef}
+scale={active ? 1.5 : 1}
+onClick={(event) => setActive(!active)}
+onPointerOver={(event) => setHover(true)}
+onPointerOut={(event) => setHover(false)}>
+<boxGeometry args={[1, 1, 1]} />
+<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+</mesh>
+)
+}`,
+ '/App.js': `import { Canvas } from '@react-three/fiber'
+import {Box} from './Box'
+
+export default function App() {
+ return (
+ <Canvas>
+ <ambientLight intensity={Math.PI / 2} />
+ <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+ <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+ <Box position={[-1.2, 0, 0]} />
+ <Box position={[1.2, 0, 0]} />
+ </Canvas>
+ )
+}`,
+ }}
+/>
+
+</details>
+
 #### `Codesandbox`
 
 ```md