Provider Controls

A provider component is used to set up the global environment for your project, such enabling as physics, post-processing, and custom context providers.

Create the component

First create a provider component, here we will place it next to the Triplex config but it can be anywhere in your project source files.

touch .triplex/provider.tsx

And then copy and paste the following code into the file.

// .triplex/provider.tsx
export default function Provider({ children }: React.PropsWithChildren<{}>) {
  return <>{children}</>;
}

Set the config

In your .triplex/config.json file set the provider prop to the relative location of the component you've just made. If you used the same location as above then it will look like this:

{
  "provider": "./provider.tsx"
}

Add some props

Props that are declared on your provider component will appear as controls in the editor that can be set temporarily during a session.

Try adding a prop and using it, when the prop is set to "dark" you should see a black background, and when it's "light" you should see a light background.

export default function Provider({
  children,
  sky,
}: React.PropsWithChildren<{ sky?: "dark" | "light" }>) {
  return (
    <>
      <color args={[dark ? "#000" : "#fff"]} attach="background" />
      {children}
    </>
  );
}

Default values are respected by the editor. If you always wanted to have a dark background you can set it.

export default function Provider({
  children,
+  sky = "dark",
}: PropsWithChildren<{ sky?: "dark" | "light" }>) {
  return (
    <>
      <color args={[dark ? "#000" : "#fff"]} attach="background" />
      {children}
    </>
  );
}

For more information on what types appear appear as what inputs see Declaring Props.