Clutch

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.

PropTypeDefaultDescription
conditioncheckboxtrue (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.

PropTypeDefaultDescription
itemsarray3 itemsIterates 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.

PropTypeDefaultDescription
queriesmodule fileExecutes a query to retrieve data.
childrenslotDisplays data returned from the query.
loadingslotFallback 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.

PropTypeDefaultDescription
forcePreviewselectForces 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.

PropTypeDefaultDescription
srcstringThe source of the third-party script to be included.
strategyselectDefines 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.