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.

1//index da sua aplicação react
2
3import ReactRenderAnywhere from 'react-render-anywhere'
4import { List, Modal } from './src/components'
5
6// Registrando os componentes
7export const reactRenderAnywhere = ReactRenderAnywhere.registerComponents([
8  { name: 'List', reactComponent: (props: any) => List(props) },
9  { name: 'Modal', reactComponent: (props: any) => Modal(props) }
10])
11

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.

1const reactRenderAnywhere = require('lib/index.js')
2reactRenderAnywhere.render({
3  component: 'Modal',
4  props: { 
5    style: { background: '#333' },
6    open: true 
7  },
8  element: document.getElementById('root')
9})

---

Feito com ❤️ por Henrique Schmeller e André Luiz Quintino.