Overview

Logic primitives in Clutch allow for dynamic control of your composition. They enable conditional rendering, iteration, data querying, A/B testing, and script integration, providing powerful tools for building interactive applications.

API Reference

If

The If primitive conditionally renders a branch of composition based on the specified condition. It can be controlled either statically or dynamically.

Prop	Type	Default	Description
condition	checkbox	true (checked)	Determines whether to render or not render the branch.

Loop

The Loop primitive iterates over an array, rendering composition for each item within the array.

Prop	Type	Default	Description
items	array	3 items	Iterates over the specified array and renders composition for each item.

Data

The Data primitive queries data using custom functions. The values returned are available within the children slot of the primitive.

Prop	Type	Default	Description
queries	module file	—	Executes a query to retrieve data.
children	slot	—	Displays data returned from the query.
loading	slot	—	Fallback UI that renders while data is being loaded. It uses Suspense under the hood. Learn more about it here.

A/B Test

The A/B Test primitive is used for A/B testing and allows you to select one of the two versions for testing.

Prop	Type	Default	Description
forcePreview	select	—	Forces the preview of one of the two versions.

Script

The Script primitive allows for pasting third-party scripts to be used in your project. It utilizes Next Script under the hood. More information can be found here.

Prop	Type	Default	Description
src	string	—	The source of the third-party script to be included.
strategy	select	—	Defines the loading strategy for the script.

React

The React primitive enables you to apply any React component (e.g., .tsx file) created within your project folder or connect to any npm component that is TypeScript-based. No properties are defined by default.