> For the complete documentation index, see [llms.txt](https://codandotv.gitbook.io/craftd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codandotv.gitbook.io/craftd/how-to-use/android/compose.md).

# Compose

### 1. Create your ComponentPropertyClass with properties that you need

* In this example i used checkbox component

> :warning: **Warning:** Here we have some points to consider To avoid unnecessary recompositions at your component. We recommend use the @Immutable and @Stable annotations in your properties. More about it below

* **@immutable**: This guarantee the composition optimization based on the assumption that values read from the type will not change.
* **@stable**: this is used to communicate some guarantees to the compose compiler about how a certain type or function will behave and keep the compose compiler notified about changes

```kotlin
@JsonIgnoreProperties(ignoreUnknown = true)
@Immutable
@Stable
data class CheckBoxProperties(
    @JsonProperty("text") val text: String? = null,
    ... define your properties here
)

```

### 2. Add your Component json object in Dymanic.json

```json
{
    "key": "CraftDCheckBox",
    "value": {
     ... define your properties here
     }
 }
  
```

### 3. Create your Component

> :memo: **Note:** Your composable component must have three properties.

* componentProperties: The mapped properties from json
* modifier: Default for composable componets
* behaviour: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...

```kotlin
@Composable
fun CraftDCheckBox(
    checkboxProperties: CheckBoxProperties,
    modifier: Modifier = Modifier,
    onChecked: (Boolean) -> Unit 
) {
   ... place your code
}
```

### 4. Create your Component Builder

> :memo: **Note:** This Builder must extend CraftBuilder Class and override craft method.

```kotlin
class CraftDCheckBoxBuilder(
    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
) :
    CraftDBuilder {
    @Composable
    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
        CraftDCheckBox(checkBoxProperties) {
            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
        }
    }
}
```

### 5. In your screen you can add the builder inside of CraftBuilderManager

```kotlin
@Composable
fun InitialScreen(
    vm: SampleCraftDComposeViewModel
) {
    val properties by vm.properties.collectAsStateWithLifecycle()
    val dynamicBuilder = remember {
        CraftDBuilderManager().add(
           CraftDCheckBoxBuilder()
        )
    }
    LaunchedEffect(Unit) {
        vm.loadProperties()
    }

    CraftDynamic(
        properties = properties,
        dynamicBuilder = dynamicBuilder
    ) {
        //Component click return to do something
    }
}
```

#### So now enjoy your component!!!