Skip to content

Commit

Permalink
Chore/update deps (support React 19)
Browse files Browse the repository at this point in the history
- Add support for React 19
- Update Getting started guide and readme
- Update dependencies
- Make required changes to code for latest versions of React and R3F
- Disable performance widget in story books (for now) due to peer dependency to React 18
- Bump version for new release to npm
  • Loading branch information
kjerandp authored Mar 7, 2025
1 parent d9eb9da commit c2d94c5
Show file tree
Hide file tree
Showing 17 changed files with 875 additions and 1,093 deletions.
24 changes: 18 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,33 @@ This library has dependencies to the following libs:
npm i videx-3d
```

You also need to install the peer-dependencies:
You also need to install the required peer-dependencies.

First, if not already installed, you'll need React version 18 or later:
```
// react
npm i react@18 react-dom@18
npm i react react-dom
```

React Three Fiber (R3F):
```
// react three fiber
npm i @react-three/fiber
```
Note that if using React 18, you need `@react-three/fiber` version 8.

Depending on your needs you might consider installing the following additional packages:
```
// three js
npm i three
// react three fiber
npm i @react-three/fiber
// drei
npm i @react-three/drei
// comlink
// comlink - if using web workers
npm i comlink
```

Note that if using React 18, you need `@react-three/drei` version 9.

## Configure
Rendering complex scenes in the browser (single threaded) can quickly become bottlenecked, degrading user experience. For this reason, most of the components have been decoupled from data management and processing, by depending on a _store interface_ and _generator_ functions. This allows the heavy work to be offloaded to web workers (but not required).
Expand Down
23 changes: 10 additions & 13 deletions documents/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,23 @@

## Creating a React app

First, we need a basic React web application running. At the time being this must be React v18 due to missing support for v19 in peer dependencies.

To create a new React v18 app, you can use Next.js:
First, we need a basic React web application running. Quickest and easiest way to do so it to use Vite:

```
npx create-next-app@14
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```

Please note that we have to use next version 14 for react v18!
Note that we need react v18 or later, and typescript is recommended.

## Installing peer dependencies

Besides React, we will also need threejs, react three fiber and comlink:
Besides React, we will also need to install react three fiber:

```
npm install three @react-three/fiber comlink
npm install three @react-three/fiber
```

## Make a simple 3d scene
Expand All @@ -27,8 +28,6 @@ Before adding the `videx-3d` components library we should create a basic 3d scen
In this example, we will be using typescript. We start by creating a new file for a component named "Test.tsx":

```tsx
'use client' // <-- if using next

// Test.tsx
import { Canvas } from '@react-three/fiber'

Expand All @@ -47,10 +46,10 @@ export const Test = () => {
Then import this file and render the Scene component in your app:

```tsx
// page.tsx
// App.tsx
import { Test } from './Test'

export default function Home() {
export default function App() {
return (
<div style={{ width: `100vw`, height: `100vh` }}>
<Test />
Expand Down Expand Up @@ -308,10 +307,8 @@ We return a mesh element, this time passing the generated geometry as a prop to
Let's replace the cubes from our earlier example with the new Tube component:

```tsx
'use client' // <-- if using next

// Test.tsx

import { CameraControls } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { Tube } from './Tube'
Expand Down
Loading

0 comments on commit c2d94c5

Please sign in to comment.