Skip to content

Instantly share code, notes, and snippets.

@douglasjunior
Created November 2, 2023 18:04
Show Gist options
  • Save douglasjunior/306119512543924a8ac178d2c23bbba2 to your computer and use it in GitHub Desktop.
Save douglasjunior/306119512543924a8ac178d2c23bbba2 to your computer and use it in GitHub Desktop.
src/helpers/entries.js
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
window.renderReactComponent = window.renderReactComponent || {};
/**
* Define os providers a serem utilizados pelos componentes.
*
* Aqui podem ser declarados providers como o Redux, React Router, Style Theme, etc.
*/
const Providers = ({ children }) => {
return (
<Suspense fallback="Carregando ...">
{children}
</Suspense>
);
};
/**
* Cria a função que irá renderizar o componente.
*
* Tal função é injetada no objeto window, para que possa ser acessada de qualquer local na aplicação legada.
*
* Exemplo:
*
* ```html
* <div id="element-root"></div>
*
* <script>
* const elementRoot = document.getElementById('element-root');
*
* window.renderReactComponent.NomeDoComponente(props, elementRoot);
* </script>
* ```
*
* Caso o elementRoot não seja informado, o componente será renderizado no elemento pai do script que chamou a função.
*
* Exemplo:
*
* ```html
* <div id="element-root">
* <script>
* window.renderReactComponent.NomeDoComponente(props);
* </script>
* </div>
* ```
*
* Caso esteja rodando em modo de desenvolvimento, o componente será renderizado no elemento com id 'root'.
*/
export const createEntry = ({
name,
component: Component,
}) => {
if (window.renderReactComponent[name]) {
throw new Error('Already exists component with name ' + name);
}
window.renderReactComponent[name] = (props, elementRoot) => {
const root = ReactDOM.createRoot(elementRoot || document.currentScript.parentNode);
root.render(
<Providers>
<Component {...props} />
</Providers>,
);
};
if (process.env.NODE_ENV === 'development') {
window.renderReactComponent[name]({}, document.getElementById('root'));
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment