Leva Controls

Leva is a hooks-based GUI for React that is used to display controls during development. When developing inside Triplex you're able to get a similar experience as Leva with the added benefit of keeping your components portable.

Take a standard Leva config inside a component:

const { color, isEnabled, scale } = useControls({
  color: "#fff",
  isEnabled: false,
  scale: 4,
});

You can instead represent this config as props your component takes.

interface Props {
  color: string;
  isEnabled: boolean;
  scale: number;
}
 
export function Component({
  color = "#fff",
  isEnabled = false,
  scale = 4,
}: Props);

Which are then able to have their values be changed in its Component Controls.

Constraints

Similar to Leva, props can have values be constrained by using JSDoc tags. Take a Leva config that sets constraints on the scale value.

useControls({
  scale: {
    value: 4,
    min: 0,
    max: 10,
    step: 1,
  },
});

You can instead represent these constraints as JSDoc tags on your prop.

interface Props {
  /**
   * @min 0
   * @max 10
   * @step 1
   */
  scale: number;
}

For an exhaustive list of tags see Declaring Props.

Complex props

Complex props such as tuples are also supported. Take a Leva config that declares a number tuple;

useControls({
  boxSize: [10, 20],
});

You can instead represent this as a tuple prop.

interface Props {
  boxSize: [number, number];
}

For an exhaustive list of types that are supported see Declaring Props.