Global Provider

The Global Provider is used to configure the environment of your project.

Your components are opened in an isolated sandbox — so they might not have the necessary environment to be rendered. Using the Global Provider you can 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.

Adding the Global Provider

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
```

Create a provider component, place it anywhere you'd like. Here we create it in the .triplex folder.

.triplex/provider.tsx

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

Update your config to use the provider. Make sure to restart Triplex after making this change.
.triplex/config.json
```
{
  "provider": "./provider.tsx"
}
```

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

.triplex/provider.tsx

import { Physics } from "@react-three/rapier";
 
export default function Provider({
  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 the provider component are available as controls in the Scene Panel. This enables dynamic configuration of your environment at runtime.

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 default function Provider({
  children,
  physicsEnabled = false,
}: {
  physicsEnabled: boolean;
  children?: React.ReactNode;
}) {
  return <Physics>{children}</Physics>;
}

Pass the prop to the Physics component.

.triplex/provider.tsx

export default function Provider({
  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.