Now we’ll make components that do all that and can communicate with other components. Truly interactive components that you can reuse in different prototypes.
With a smart component is meant: one that is not only interactive (a checkbox that can be checked, a slider with a knob that’s draggable), but that can also be used with other elements on the screen (clicking the checkbox can trigger an animation, you can display the value of the slider).
A smart component has:
An internal memory, so it can know things like:
- whether it’s on or off (when the component is e.g., a switch or checkbox)
- the text the user entered (for an input field)
- its current value (when it’s a slider)
This makes it possible to listen to the component, be notified when it changed, so you can:
- trigger an animation when the switch is flipped
- save the text that was typed in the input field
- display the current value of the slider somewhere on the screen
This makes the component even more composable because it will then let you:
- set the initial on/off state of the switch, or flip it with an Override
- dynamically change the text in the input field
- set the initial position of the slider, or move its knob programmatically