Declaring Props

Props declared on your components are expressed through the editor UI. This guide shows your what inputs will be shown for a given type.

Primitive types

For props of types string, number, and boolean an editable input or checkbox will be shown.

interface ComponentProps {
  x: number; // a number input is shown
  name: string; // a text input is shown
  isEnabled: boolean; // a checkbox is shown
}
 
export function Component(props: ComponentProps);

Tuple types

Tuple types are shown as a list of inputs in the editor. All supported types can be used in tuples, which can also be labelled.

interface ComponentProps {
  size?: [x: number, y: number, z: number];
}
 
export function Component(props: ComponentProps);

Literal union types

Literal union types are shown as a select with the possible values in the editor. Both string and number literals are supported.

interface ComponentProps {
  size?: "small" | "medium" | "large";
}
 
export function Component(props: ComponentProps);

Union types

Union types are able to be toggled through the editor. All supported types can be used in unions.

interface ComponentProps {
  size?: number | [number, number] | [number, number, number];
}
 
export function Component(props: ComponentProps);

Default values

Props that are optional and have an initialized value are respected by the editor.

interface ComponentProps {
  isEnabled?: boolean;
}
 
// isEnabled is checked by default in the editor
export function Component({ isEnabled = true }: ComponentProps);

Tags

Component props can declare optional JSDoc tags that give Triplex extra information about how to handle the prop through the UI. A prop can have multiple tags declared.

All supported tags are listed here.

@max

Constrains the value of the prop to not be above this number.

Supported prop types: number

interface ComponentProps {
  /**
   * @max 10
   */
  x: number;
}

@min

Constrains the value of the prop to not be below this number.

Supported prop types: number

interface ComponentProps {
  /**
   * @min -5
   */
  x: number;
}

@step

Constrains each value change of the prop to be in increments of this value.

Supported prop types: number

interface ComponentProps {
  /**
   * @step 1
   */
  x: number;
}