Smart Code Components

You already know how to make code components customizable with property controls and add animations to them. Now we’ll make components that do all that and can communicate with other layers on the screen. Interactive components that you can reuse in different prototypes.

A smart code component has:

State

An internal memory, so it can remember things like:

• whether it’s on or off (when the component is a switch or checkbox);
• the text the user entered (for an input field); or
• its current value (when it’s a slider).

The ability to share its state

This makes it possible to listen to the component with an override, so you can:

• trigger an animation when the switch is flipped;
• save the text that was typed in the input field; or
• display the current value of the slider somewhere on the screen.

You can change its state with a property control

This makes the component even more composable because it will let you:

• flip the switch with an override;
• dynamically change the text in the input field;
• or move the slider’s knob programmatically.

In this section

• In this Smart Code Components section, you can learn more about:
  • the difference between props and state,
  • how props are passed to a component,
  • how to share a component’s state,
  • and how to let a prop influence a component’s state.
• If you’ve created components before and just need a reminder of how things are done: check the Simple But Smart example.
• And in iOS Segmented Control, we build a complete component from scratch.