Skip to content

Props

Video Lecture

Section Video Links
Props Props Props 

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

Props (a.k.a. properties) are used in React to pass in attributes to your components when you declare them in the JSX.

Our Box from the last lesson is our component that returns a JSX.Element describing a THREE.Mesh.

But we cannot modify any of its properties when we create it, so if we create 2 or more, then they will just be placed in the scene on top of each other in the same position.

Instead, we can add props that we will use to further initialize them with a position when we declare them in the JSX.

./src/Box.jsx

1
2
3
4
5
6
7
8
export default function Box(props) {
  return (
    <mesh {...props}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Canvas } from '@react-three/fiber'
import Box from './Box'

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 2] }}>
      <Box position={[-0.75, 0, 0]} name="A" />
      <Box position={[0.75, 0, 0]} name="B" />
    </Canvas>
  )
}

Note that React will re-render any component instances whenever a change is made to its state or props.

Working Example

<>
Components and Props reactjs.org sbedit.net
Spread Syntax developer.mozilla.org
Destructuring Assignment developer.mozilla.org
THREE.Mesh threejs.org
THREE.Object3D threejs.org sbcode.net

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout props
npm install
npm start