Value Components

These components render a decision’s value directly.

Tip

You don’t have to use these components directly in your docs. Using ShowDecision will select the appropriate one for you.

They are exposed so that anyone can create custom visualizations, composing values and visualizations directly in their custom components.

Refer to the table on Composable Types for all decision types and their corresponding value components.

Common Props

༶ v: BaseValue<unknown>

A decision value of the appropriate type.

༶ value: string | string[]

All of these components share the same value prop to control how the value should be formatted. The formats available depend on type of value are listed below for each component.

Decision components, such as <ShowDecision/> expose this prop as well, so that you can have full control over format.

Color

Color related components.

ShowColorValue

༶ v: ColorValue

༶ value: ColorFormat | ColorFormat[]

Example

export const colorValue = createColorValue(context, '#ff0000');

<ShowColorValue v={colorValue} value={['rgb', 'hsl', 'oklch']} />

#ff0000

hsl(360deg 100% 50%)

oklch(62.8% 0.258 29.2deg)

ShowColorChannelValue

༶ v: ColorChannelValue

༶ value: -

This prop has no effect on this component.

Example

export const colorChannelValue = createOklabHueValue(context, 123);

<ShowColorChannelValue v={colorChannelValue} />

123

Space

Space related components.

ShowSpaceValue

༶ v: SpaceValue

༶ value: -

This prop has no effect on this component.

Example

export const spaceValue = createSpaceValue(context, 12);

<ShowSpaceValue v={spaceValue} />

12px