Introduction to interactions and state
This page will introduce you to interactions and state, and how they can be used to create dynamic, interactive user experiences.
What is state?
User interfaces often need to change what’s displayed as a result of user interaction. Clicking a collapsed FAQ section should expand to reveal the full content, clicking “Next” on an image carousel should switch the shown image, clicking a tab should swap out the content, typing text into a search input should filter the list of results, and so on. Therefore, components need to store state, data used to keep track of whether the FAQ section is expanded, which image is shown, which tab is shown, what the filter text is, and so on.
More generally, state is any data that may change in a UI.
Using interactive components
Components that your users interact with often come with state—we call them stateful components. You can connect their state to other parts of your UI with dynamic values.
In the following video, we will:
- Show and hide an element by connecting its visibility to a switch
- Filter a collection of products by connecting a text input
Play with the demo project used in the video.
Adding interactions
Plasmic’s built-in components like switch and text input already automatically update their state internally. But what if you want to update state externally, from another element?
Interactions to the rescue. An interaction is a sequence of actions that can be triggered by a component.
In the following video, we will:
- Reset a text input when a button is clicked
- Change a variant when a tab is clicked
- Build a counter
- Run custom JavaScript code
- Use other interaction trigger types
Play with the demo project used in the video.
Next steps
Try out interactions for yourself with the interactions tutorial.