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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/jsx.design/styling-ui/creating-and-using-props.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.