States are a powerful feature of Replo which allow components to take on different styles in certain circumstances - for example, a button can have a different background color when the user hovers over it with their mouse.

Adding States

To Add a State to a Component:

1. Select the component you want to add a state to.
2. Find "States" at the top of the right bar of editor.
3. Click the "+" button to add a state.
   1. To add a Hover state, click the "On Hover" option.
   2. To add a different kind of state, click the "Add Custom" option.

Styling a State

To Modify the Styles that Appear Only When a State is Active:

1. Select the state you want to modify (e.g., "Hover") under "States" at the top of the right bar of editor.
2. Edit styles normally - these styles will only appear when the state is active.
3. When you're done editing the state, click the "Default" state under "States" to return to normal editing.

Modifying the Styles of Components Inside Containers

When you're editing a State, all edits you make to the component that has that State, and any components inside it, apply only to that State.

For example, if you have a container with a hover State, and during the hover State you want to have a button inside that container change color, simply select the hover State, then click on the button and edit its styles. The style changes will apply only to the hover State of the container.

Different Types of States

There are several different types of states that can be added to a component.

To Edit the Type of a State:

1. Find the State to edit, then select it.
2. Click the "Pencil" icon to edit the State.
3. Select the type of the State from the dropdown.
4. Replo saves the update to your State automatically.

Hover

The most common type of state. This state is active when the user hovers over the component with their mouse.

Pixels From Top Of Page

This state is active when the user has scrolled a certain number of pixels from the top of the page.

Pixels From Top Of Viewport

This state is active when the user has scrolled a certain number of pixels from the top of the viewport.

Hashmark

This state is active when the user has scrolled to a component with a specific URL hashmark. URL hashmarks are configurable on any Container under "Config" on the on the right side of the editor.

Loading

This state is active when an interaction is running on the component which has the state. Loading states are really useful for interactive buttons, like Add to Cart buttons.

No Condition

It's also possible to have States which are not automatically active. These States can be activated using the Activate State Interaction.

Order of States

States are evaluated left to right. The order of states can be moved by dragging and dropping them in the order you want them to be in.

In this example, we have 3 states on our sticky header. The default state set the background of our header to blue. The green state changes the header to green when the screen is scrolled > 300 pixels. The red state changes the header to red when the screen is scrolled to > 600 pixels.

In the order Default > Green > Red, the header will never change to red no matter how far you scroll.

This is because of the order of operations of states. Pixels > 300 is evaluated as true first, and therefore the green state stays active.

To ensure that after scrolling to > 600 pixels the header turns read (i.e, the red state is activated) you must place it before the green state.