Last updated

Eject components

In some cases, it may be necessary to extend the functionality of existing components, such as the Search, Footer, or Markdoc Card components. The eject feature allows you to create a local copy of the component’s source code within your project. After that, you can customize the component's styles, structure, or behavior.

Eject component warning

Once a component is ejected and customized, it's your responsibility to maintain the implementation moving forward. Make sure a component cannot be customized in other ways before ejecting.

Before you begin

Make sure you have the following before you begin:

  • A Redocly project in Reunite.
  • Check if your component can be customized without ejecting

Find components with browser dev tools

Before you eject a component, you need to determine the correct files to eject to achieve the effect you want to make. The browser developer tools can help you identify which components are ejectable.

To determine the component to eject using Google Chrome developer tools do the following:

  1. Open developer tools - right-click the element you're interested in and select Inspect or press F12.

    Inspect component

  2. Identify component name - find data-component-name attribute and see its value.

    Find data component name

Eject component

After you have determined you need to alter a component by ejecting it and what component you want to alter, eject your component in one of the following ways:

  • Using the Reunite web editor (recommended): Use the UI in Reunite to select the component and eject the files into your project.
  • Using Redocly CLI: Use Redocly CLI to select the component and eject the files. Before you can eject components using Redocly CLI, you must download all of your project files, so you can work with them locally. Afterward, the ejected component files need to be added to your files in Reunite.

Resources

 
Next page