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.