> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/jsx.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/jsx.design/styling-ui/creating-and-using-props.md).

# 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.

{% embed url="<https://youtu.be/qUg7RrWxfLE>" %}

## 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':*
>
> ```jsx
> <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"`).

{% hint style="info" %}
Changes will reflect in real-time in the editor.
{% endhint %}

## 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.](/jsx.design/advanced-features/ejecting-a-custom-component.md)
* After ejecting, you can directly manipulate nested elements and their props.

{% hint style="info" %}
Even after ejecting, you can use JSX.Design's editor for visual updates.
{% endhint %}

***

#### **Next Steps:**

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