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
  • What is Ejecting?
  • When should you eject a component?
  • Ejecting a Custom Component
  • Understanding the ejected file structure
  • Benefits of Ejecting
  1. Advanced Features

Ejecting a custom component

PreviousBring custom code or other React librariesNextHandling Global CSS warning

Last updated 3 months ago

Ejecting a custom component gives you complete control over its code, while still allowing you to use the visual editor for changes. This feature is especially useful for advanced use cases where direct code manipulation is necessary.

What is Ejecting?

When you eject a custom component:

  • A separate, editable file is generated for the component.

  • This new file allows you to make custom modifications to the component’s behavior or functionality.

  • The rest of the canvas remains visually editable in JSX.Design.

When should you eject a component?

Consider ejecting when:

  1. You need individual control over specific instances of a component.

  2. You want to add custom functionality like event handlers or state management.

  3. You aim to integrate external or advanced code logic without disrupting JSX.Design’s auto-generated files.

Ejecting a Custom Component

Follow this step to eject a custom component.

  • Step 2: Run the below command in your terminal:

npx jsx-design@latest eject projectID

You can find the respective eject commands inside every JSX.Design generated file.

  • Step 3: Select the component you want to eject.

  • Step 4: JSX.Design generates a new file in the 'ejected-files' folder.

  • Step 5: Make custom modifications to the component’s behavior or functionality like event handlers or state management in this new file.

Understanding the ejected file structure

  • Custom component file:

    • The custom component file remains untouched and reusable.

  • Ejected file:

    • The ejected file wraps around the custom component.

  • Parent file:

    • The parent file now references the ejected file instead of the custom component.

Benefits of Ejecting

  • Code Customization: Add advanced logic, states, and events seamlessly.

  • Non-Destructive Editing: The visual editor and generated files remain intact.

  • Reusable Components: Ejected files only affect specific instances, preserving original custom components.

Next Steps:

Need any help troubleshooting?

Step 1: Make sure you have successfully exported the code to your React project. .

See how you can export code