JSX.Design
  • Introduction
    • Why JSX.Design?
    • Minimum Requirements
  • Getting Started
    • Building your first React UI
    • Making your UI responsive
    • Exporting your code
  • Styling UI
    • Basic styling
    • Creating reusable components
    • Conditional rendering with view states
    • Creating & using Props
    • Mapping an array
  • Advanced Features
    • Bring custom code or other React libraries
    • Ejecting a custom component
  • Troubleshooting
    • Handling Global CSS warning
    • Syncing project versions between JSX.Design and IDE
    • Handling export conflicts for unsaved projects
Powered by GitBook
On this page
  • Key features of view states
  • Create a new view state
  • Configure the view state
  • Understanding responsiveness & view states
  • Triggering view states in custom components
  • Benefits of conditional rendering
  1. Styling UI

Conditional rendering with view states

View states enable you to create dynamic interfaces by defining multiple states for your components. Each state can have its own layout, style, or behavior, and these states can be triggered based on conditions like props or user interactions.

Key features of view states

  • Switch Between View States

    • Create multiple "view-states" to define how your UI should look under different conditions.

    • Each state can have unique layouts or styles.

  • Set Up Conditional Rules

    • Display or hide components dynamically based on props or user input.

    • Define rules to control when and how a state is triggered.

  • Interactive Previews

    • Switch between states to see how your UI adapts in real-time.

Create a new view state

  1. Navigate to the View States tab in the left-hand toolbar.

  2. Click the '+' button and give it a name, e.g., isOpen.

Configure the view state

You can work with view states in two modes:

  • View Mode: Enables previewing changes without affecting the state’s configuration. Any edits made in this mode will not be recorded.

  • Edit Mode: Allows you to modify the canvas, and all changes will be saved as part of the active view state.

Understanding responsiveness & view states

When designing responsive UIs, view states help you define layouts for different breakpoints.

Switching breakpoints in the editor (e.g., desktop to mobile) navigates between corresponding view states (lg, md, xs, etc.).

Any changes made in a specific breakpoint are automatically recorded in the relevant view state.

Triggering view states in custom components

To dynamically trigger view states of a custom component from a parent component:

  1. Add a prop to the custom component from the parent canvas with the same name as the view state, e.g., isOpen.

  2. Set the prop type to boolean.

  3. When the prop is set to true, the corresponding view state will activate.

Benefits of conditional rendering

  • Simplifies the process of creating dynamic UIs.

  • Enables responsive design directly in the editor.

  • Reduces the need for complex code by leveraging props and visual editing.

Next Steps:

You've mastered conditional rendering! Let's move on:

PreviousCreating reusable componentsNextCreating & using Props

Last updated 3 months ago