react-render-anywhere v1.0.6
React Render Anywhere
Renderize um componente React em qualquer HTML
Como funciona?
React Render Anywhere registra os componentes React e utiliza do próprio build, para renderizar os componentes em QUALQUER aplicação que tenha suporte a HTML e JavaScript
Registrando os Components
Você deve buildar a sua aplicação React, exportando o ReactRenderAnywhere, com os componentes cadastrados que você deseja disponibilizar para a outra aplicação.
O método registerComponents deve receber um objeto chave valor de um ou mais posições, contento o nome do componente como chave (que será chamado para renderizar) e o componente React como valor.
//index da sua aplicação react
import ReactRenderAnywhere from 'react-render-anywhere'
import { List, Modal } from './src/components'
// Registrando os componentes
export const reactRenderAnywhere = ReactRenderAnywhere.registerComponents([
{ name: 'List', reactComponent: (props: any) => List(props) },
{ name: 'Modal', reactComponent: (props: any) => Modal(props) }
])
Renderizando um componente
Com o projeto React buildado, você deverá importar o script compilado que exportou o reactRenderAnywhere e informar um dos componentes React registrados para ser renderizado, passando a tag HTML para a renderização.
const reactRenderAnywhere = require('lib/index.js')
reactRenderAnywhere.render({
component: 'Modal',
props: {
style: { background: '#333' },
open: true
},
element: document.getElementById('root')
})
Feito com ❤️ por Henrique Schmeller e André Luiz Quintino.