Ejecting a custom component
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:
You need individual control over specific instances of a component.
You want to add custom functionality like event handlers or state management.
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 1: Make sure you have successfully exported the code to your React project. See how you can export code.
Step 2: Run the below command in your terminal:
npx jsx-design@latest eject projectIDStep 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?
Last updated