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.
A smart component is not only interactive (a checkbox that can be checked, a slider with a draggable knob), but can also be used with other elements on the screen (clicking the checkbox to trigger an animation, having the slider change a value next to it).
A smart component has:
An internal memory, so it can know 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).
This makes it possible to listen to the component—be notified when it changes—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.
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; and
- set the initial position of the slider, or move its knob programmatically.