Providers

Provider components let you set up the environment of your project.

Components are rendered by themselves so they might be missing things to render correctly. Using provider components lets you configure the environment needed by your components.

New Knowledge

Provider components are a common way for configuring your environment in React. If you're not familiar with them please read Passing Data Deeply with Context.

Provider Set Up

There is some set up required before creating a provider component.

If you haven't already create the config file from the root of your project.

Terminal

npx make-dir-cli .triplex
npx touch .triplex/config.json
npx touch .triplex/provider.tsx

Update your config to use the created provider module. You'll need to restart Triplex after making this change.
.triplex/config.json
```
{
  "provider": "./provider.tsx"
}
```

Global Provider

The Global Provider is rendered at the root of the component tree. This is useful for setting up global styles, themes, and data.

Create a provider component.

.triplex/provider.tsx

export function GlobalProvider({
  children,
}: {
  children?: React.ReactNode;
}) {
  return children;
}

Configure the environment as needed. Here we set up a global theme using a CSS file and data attributes.

.triplex/provider.tsx

import "./styles.css";
 
export function GlobalProvider({
  children,
}: {
  children?: React.ReactNode;
}) {
  return <div data-theme="dark">{children}</div>;
}

Canvas Provider

The Canvas Provider is rendered inside Canvas components, either the implicit one when opening a 3D component, or the explicit ones when opening a 2D component.

Create a provider component.

.triplex/provider.tsx

export function CanvasProvider({
  children,
}: {
  children?: React.ReactNode;
}) {
  return children;
}

Configure the environment as needed. Here we set up Rapier physics.

.triplex/provider.tsx

import { Physics } from "@react-three/rapier";
 
export function CanvasProvider({
  children,
}: {
  children?: React.ReactNode;
}) {
  return <Physics>{children}</Physics>;
}

Now components that use physics such as RigidBody and Colliders can render without erroring.

Provider Controls

Props declared on provider components are available as input controls in the scene panel. This allows you to change your environment on the fly.

Taking the Rapier example above having physics be usable is great but having them run all the time... isn't. Especially when you're wanting to edit or inspect your scene!

To fix this we can disable the simulation using props.

Declare a boolean prop on the component.

.triplex/provider.tsx

export function CanvasProvider({
  children,
  physicsEnabled = false,
}: {
  physicsEnabled: boolean;
  children?: React.ReactNode;
}) {
  return <Physics>{children}</Physics>;
}

Pass the prop to the Physics component.

.triplex/provider.tsx

export function CanvasProvider({
  children,
  physicsEnabled = false,
}: {
  physicsEnabled: boolean;
  children?: React.ReactNode;
}) {
  return <Physics paused={!physicsEnabled}>{children}</Physics>;
}

The prop now appears in the scene panel and can be toggled on and off.

For an exhaustive list of supported props see API Reference > Props.