How to insert react elements into a third-party react component after rendered?

Question

Trying to append my react elements into a third-party rendered component(DOM element) without touching the third-party package.

SomeComponent defines and renders the tools data internally, it doesn't provide an API to custom or extend the tools. So I want to directly extend the tools view via DOM manipulation.

third-party.tsx:

import * as React from 'react';

export const SomeComponent = () => {
  const tools = [
    { value: 1, action: () => console.log('a') },
    { value: 2, action: () => console.log('b') },
    { value: 3, action: () => console.log('c') },
  ];
  return (
    <div>
      <ul className="tools-wrapper">
        {tools.map((tool) => (
          <li onClick={tool.action} key={tool.value}>
            {tool.value}
          </li>
        ))}
      </ul>
    </div>
  );
};

App.tsx:

import * as React from 'react';
import './style.css';
import { SomeComponent } from './third-party';

export default function App() {
  const customTools = [
    { value: 100, action: () => console.log('hello') },
    { value: 100, action: () => console.log('world') },
  ];
  const customToolElements = (
    <React.Fragment>
      {customTools.map((tool) => (
        <li key={tool.value} onClick={tool.action}>
          {tool.value}
        </li>
      ))}
    </React.Fragment>
  );
  React.useEffect(() => {
    const toolsWrapper = document.querySelector('.tools-wrapper');
    // Append react elements into third-party rendered DOM element.
    // Of course, it throws an error, customToolElements is not a DOM native Node type.
    toolsWrapper.appendChild(customToolElements);
  }, []);
  return (
    <div>
      <SomeComponent />
    </div>
  );
}

Is this possible to extend the component of third-party via DOM manipulation directly rather than a data-driven API?

Agan · Accepted Answer · 2023-01-19 13:59:53Z

2

It is not recommended to directly extend a third-party component through DOM manipulation.

Instead of trying to append the custom tools directly to the DOM, pass the custom tools as a prop to the SomeComponent and use them to render additional elements.

import * as React from 'react';

export const SomeComponent = (props) => {
  const tools = [
    { value: 1, action: () => console.log('a') },
    { value: 2, action: () => console.log('b') },
    { value: 3, action: () => console.log('c') },
    ...props.customTools
  ];
  return (
    <div>
      <ul className="tools-wrapper">
        {tools.map((tool) => (
          <li onClick={tool.action} key={tool.value}>
            {tool.value}
          </li>
        ))}
      </ul>
    </div>
  );
};

In the App.tsx file, pass the customTools prop to the SomeComponent when it is rendered.

import * as React from 'react';
import './style.css';
import { SomeComponent } from './third-party';

export default function App() {
  const customTools = [
    { value: 100, action: () => console.log('hello') },
    { value: 100, action: () => console.log('world') },
  ];

  return (
    <div>
      <SomeComponent customTools={customTools} />
    </div>
  );
}

I have removed the useEffect hook and the customToolElements variable.

React.useEffect(() => {
    const toolsWrapper = document.querySelector('.tools-wrapper');
    // Append react elements into third-party rendered DOM element.
    // Of course, it throws an error, customToolElements is not a DOM native Node type.
    toolsWrapper.appendChild(customToolElements);
}, []);

edited Jan 19, 2023 at 13:59

answered Jan 19, 2023 at 7:57

Agan

5173 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lin Du Over a year ago

Note: the component of third-party doesn't use React.forwardRef to forward the ref to the target element (the tools-wrapper in my case).

Agan Over a year ago

Yes, it is not recommended to directly extend a third-party component through DOM manipulation because doing so could cause unexpected behavior and is not considered a best practice. Create a new component that encapsulates and extends the functionality of the third-party component or utilizing the data-driven API of the third-party component is preferred/better solution.

Agan Over a year ago

@LinDu the solution is updated.

Collectives™ on Stack Overflow

How to insert react elements into a third-party react component after rendered?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related