Creating & using Props
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").
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:
Eject the custom component. Learn more about Ejecting Components.
After ejecting, you can directly manipulate nested elements and their props.
Next Steps:
You've mastered Props! Let's move on:
Last updated