Clutch and React

Clutch maps very closely to React to not introduce restrictions on users and to enforce real-world concepts when using the tool.

Let's look at some React code and then how that might be built in Clutch.

import React from 'react';

export default function MyComponent (props) => {
    return (
        <Box style={{backgroundColor: '#ddd', padding: '10px'}}>
            <Button onClick=()=>{alert('you clicked the button')}>
                <Text text="Hello World!" />
            </Button>
        </Box>
    )
}

In Clutch that would be something like the following, starting first with the Composition Panel.

A Box component a Button Component and a Text component in a nested structure.A Box component a Button Component and a Text component in a nested structure.

A Box component a Button Component and a Text component in a nested structure.

The composition can be thought of as being the return (i.e. the render) of a React component. The properties themselves can be seen, added, deleted, and manipulated from the properties panel on the right-hand side. For example, changing the property text of the Text component would be done by selecting the Component instance on the left, and changing the corresponding property value on the right.

The properties panel of a selected component.The properties panel of a selected component.

The properties panel of a selected component.

Differences with React

Adding properties

In React it is up to the user (sometimes with the help of typings and PropTypes) to be aware of what properties a component accepts and to add, one-by-one, those properties, and their values, to the components. Clutch, which features both a templating and documentation layer, allows users to quickly add the most common properties by default, and to add additional properties from a drop-down list with a single click.

Documented properties can be quickly added to a component instance.Documented properties can be quickly added to a component instance.

Documented properties can be quickly added to a component instance.

Controls

In React there is only one option to set values on properties, and that is to write it in using code. Whether it's a string, a number, an object, or any other type of value, the reality is typing valid JavaScript is the only way to set it.

Clutch offers controls. Sure, a color is just a string like "#FF0033" but is typing that the best way to interact with color values? In this instance, providing a color picker is a much better way to interact with this value.

A color property activated to show the color picker fly-out.A color property activated to show the color picker fly-out.

A color property activated to show the color picker fly-out.

From binding to live data to styling components, custom controls offer a superior experience to working with components and their properties..