AnimatedNumber

React component that animates from one number to another.

Parameters

• props Object:
• props.from Number: The value to animate from.
• props.to Number: The value to animate to.
• props.duration Number: The duration of the animation.

Badge

React component that displays a badge.

Type

• React.FC< { text: string; } >

checkConditions

Checks if the saved object matches the conditions.

Parameters

• conditions ComparisonCondition[]: The conditions to check.
• saved Record< string, unknown >: The saved object.

ColorSetting

Displays a color setting

Type

• React.FC< ColorSettingProps >

ComboboxSetting

Displays a combobox setting

compare

Compares two values using the specified operator.

Parameters

• conditionValue any: - The value to compare against (left side of the comparison).
• operator Operators: - The operator to use for comparison.
• savedValue any: - The saved value to compare with (right side of the comparison).

Returns

• boolean: The result of the comparison.

ConditionalLogicEditor

Displays the conditional logic editor.

Type

• React.FC< ConditionalLogicEditorProps >

ConditionalLogicRule

Displays a single conditional logic rule.

Type

• React.FC< ConditionalLogicRuleProps >

ConditionalLogicRules

Displays the available conditional logic rules.

Type

• React.FC< ConditionalLogicRulesProps >

ConditionalLogicTypeSelector

Displays the conditional logic editor type selector.

Type

• React.FC< ConditionalLogicTypeSelectorProps >

ErrorBoundary

ErrorBoundary component that catches JavaScript errors in its child component tree. It displays a fallback UI instead of crashing the whole application.

Type

• ErrorBoundary

getMergeTagValue

Returns a merge tag's value.

Parameters

• smartTag smartTag: - The smart tag to get the value of.

getNestedValue

Fetches a nested value from an object.

Parameters

• obj Record< string, unknown >: - The object to fetch the value from.
• path string | string[] | undefined: - The nested path as an array of keys.

HorizontalSettings

Stacks settings horizontally.

Type

• React.FC< Props >

ImageOrIcon

Icon component.

Parameters

• props Object: - The component props.
• props.image string: - The image URL, dashicon, or SVG.
• props.alt string: - The alt text.
• props.width number: - The width.

InputSetting

Displays an input setting

Parameters

• props Object:
• props.attributes Function: The attributes
• props.setting Object: The setting object.
• props.availableSmartTags Array: The available smart tags.

Returns

• JSX.Element:

KeyValueRepeater

Displays a key value repeater setting.

Type

• React.FC< KeyValueRepeaterProps >

KeyValueRepeaterField

Displays a key value repeater setting field.

Type

• React.FC< KeyValueRepeaterFieldProps >

MultiCheckbox

Displays a multi-checkbox setting.

MultiSelectSetting

Multi select control.

operators

A record of comparison operators with their corresponding functions.

Type

• Record<Operators, OperatorFn>

prepareAvailableSmartTags

Returns a list of available smart tags.

Parameters

• smartTags Record<string, any>: - The smart tags to prepare.
• savedSettings Record<string, any>: - The saved settings to use for conditional logic.

Returns

• smartTag[]: The prepared smart tags.

randomColor

Generate random color

Usage

// Generate random color
uniqolor.random()
// { color: "#644cc8", isLight: false }

// Generate a random color with HSL format
uniqolor.random({ format: 'hsl' })
// { color: "hsl(89, 55%, 60%)", isLight: true }

// Generate a random color in specific saturation and lightness
uniqolor.random({
  saturation: 80,
  lightness: [70, 80],
})
// { color: "#c7b9da", isLight: true }

// Generate a random color but exclude red color range
uniqolor.random({
  excludeHue: [[0, 20], [325, 359]],
})
// {color: '#53caab', isLight: true}

Parameters

• options [Object]:
• options.format [string]: The color format, it can be one of hex, rgb or hsl
• options.saturation [number|Array]: Determines the color saturation, it can be a number or a range between 0 and 100
• options.lightness [number|Array]: Determines the color lightness, it can be a number or a range between 0 and 100
• options.differencePoint [number]: Determines the color brightness difference point. We use it to obtain the isLight value in the output, it can be a number between 0 and 255
• options.excludeHue [Array]: Exclude certain hue ranges. For example to exclude red color range: [[0, 20], [325, 359]]

Returns

• Object:

RemoteSettings

Displays remote settings.

Type

• React.FC< SettingProps >

RepeaterControl

Displays a repeater setting.

Type

• React.FC< RepeaterControlProps >

RepeaterItem

Displays a single item in a repeater field.

Type

• React.FC< RepeaterItemProps >

SelectSetting

Displays a select setting

Type

• React.FC< SelectSettingProps >

Setting

Displays a single setting.

Returns

• JSX.Element:

stringToColor

Generate unique color from value

Usage

stringToColor('Hello world!')
// { color: "#5cc653", isLight: true }

stringToColor('Hello world!', { format: 'rgb' })
// { color: "rgb(92, 198, 83)", isLight: true }

stringToColor('Hello world!', {
  saturation: 30,
  lightness: [70, 80],
})
// { color: "#afd2ac", isLight: true }

stringToColor('Hello world!', {
  saturation: 30,
  lightness: [70, 80],
  differencePoint: 200,
})
// { color: "#afd2ac", isLight: false }

Parameters

• value string|number:
• options [Object]:
• options.format [string]: The color format, it can be one of hex, rgb or hsl
• options.saturation [number|Array]: Determines the color saturation, it can be a number or a range between 0 and 100
• options.lightness [number|Array]: Determines the color lightness, it can be a number or a range between 0 and 100
• options.differencePoint [number]: Determines the color brightness difference point. We use it to obtain the isLight value in the output, it can be a number between 0 and 255

Returns

• Object:

TextareaSetting

Displays a textarea setting

Type

• React.FC< TextareaSettingProps >

TimeControl

Undocumented declaration.

TimeZone

Displays timezone information when user timezone is different from site timezone.

TinyMCESetting

Displays a TinyMCE editor.

Users have to manually add the TinyMCE script to their page.

Type

• React.FC< TinyMCESettingProps >

ToggleGroupSetting

Displays a toggle group setting

updateNestedValue

Updates a value of any nested path in an object.

Parameters

• obj Record< string, unknown >: - The object to update.
• path string[] | string: - The nested path as an array of keys.
• value unknown: - The new value.

useCombineOptions

Combines options with dynamic value option.

Parameters

• options SelectOption[]: The options.
• availableSmartTags smartTag[] | undefined: The available smart tags.

useMergeTagGroups

Prepares merge tag groups from the available merge tags.

useMergeTags

Makes it possible to use the merge tag selector in a field.

Returns

• JSX.Element:

useOptions

Prepares the available options for the selected condition.

Parameters

• options string[] | SelectOption[] | Record< string, string >: The options.

usePlaceholder

Adds a placeholder to the beginning of an array.

Parameters

• options SelectOption[]: The options.
• placeholder string: The placeholder text.

withErrorBoundary

HOC to wrap a component with the ErrorBoundary

Parameters

• Component React.ComponentType< P >: - The component to wrap
• errorBoundaryProps Omit< Props, 'children' >: - Props to pass to the ErrorBoundary