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
  • Adding Props to canvas
  • Accessing Props in your React project
  • Adding Ant Design Props
  • Using Props to trigger viewstates of custom components
  • Advanced Usage: Accessing nested Props inside custom components
  1. Styling UI

Creating & using Props

PreviousConditional rendering with view statesNextMapping an array

Last updated 3 months ago

Props in JSX.Design provide a powerful way to customize and control your React components and canvases. This guide walks you through their creation and usage, including advanced scenarios and integration with your IDE.

Adding Props to canvas

  • Select the component you want to add a prop to.

  • Navigate to the Props tab in the right sidebar.

  • Click on the Add button

  • Give a name for your prop (Eg: onClick) and click on Add Prop

  • (Optional) Click on the expand button to view more inputs:

    • Set the prop type: String, number or boolean

    • Set the value

Accessing Props in your React project

Typically, you can call props directly using the component name. For example, to call an onClick prop inside a button: <button onClick="value"/>

However, when importing an entire canvas, ensure each prop is uniquely identifiable. Here's how you can do it:

  • Select the component with the prop.

  • Navigate to the Props tab in the right sidebar.

  • On Elem ID input, give a unique ID.

  • On IDE, access props using the format: componentID_propname

For example, let's say you want to call an onClick prop of a button with elemID submitBtn, which is part of a canvas named 'auth':

<authUI submitBtn_onClick="value" />

Adding Ant Design Props

JSX.Design supports Ant Design (AntD) props for compatible components:

  • Select the AntD component.

  • Use the Props tab to add supported properties (e.g., type="primary").

Changes will reflect in real-time in the editor.

Using Props to trigger viewstates of custom components

Props can also trigger view states in custom components:

  • Ensure the custom component has defined view states (e.g., isExpanded).

  • Create a prop with the same name as the view state.

  • Set the prop type to boolean.

  • When the prop is set to true, the corresponding view state will be triggered.

Advanced Usage: Accessing nested Props inside custom components

For complex scenarios, such as accessing props within a custom component's nested elements:

  • After ejecting, you can directly manipulate nested elements and their props.

Even after ejecting, you can use JSX.Design's editor for visual updates.

Next Steps:

You've mastered Props! Let's move on:

Eject the custom component. Learn more about

Ejecting Components.