remount

Remontar

Use seus componentes React em qualquer lugar do seu
HTML como componentes da web (elementos personalizados).

Demonstração ⚡ Documentos
2kb compactado · Sem dependências · Suporte ao IE

Instalação

A remontagem está disponível através do repositório de pacotes npm. O React 18 é obrigatório.

 # npm
npm install remount react react-dom
# yarn
yarn add remount react react-dom

• Via fio: yarn add remount
• ou npm: npm install remount

Uso

Vamos começar com qualquer componente React. Aqui está um:

 const Greeter = ( { name } ) => {
  return < div > Hello, { name } ! < / div >
}

Use define() para definir elementos personalizados. Vamos definir um elemento <x-greeter> :

 import { define } from 'remount'

define ( { 'x-greeter' : Greeter } )

Agora você pode usá-lo em qualquer lugar do seu HTML! ?

 < x-greeter props-json =' {"name":"John"} ' > </ x-greeter >

⚡ Documentação da API →

Casos de uso

Algumas idéias sobre por que você pode considerar o Remount para o seu projeto:

	Adicionando React a aplicativos não SPA Você pode usar componentes React em qualquer página de um site HTML “normal”. Ótimo para adicionar React a aplicativos desenvolvidos em Rails ou Phoenix.
	? Interoperabilidade com outras estruturas Remount permite que você use seus componentes React como qualquer outro elemento HTML. Isso significa que você pode usar React com Vue, Angular ou qualquer outra biblioteca/estrutura DOM.

Mais recursos

• Adereços JSON (por exemplo, <x-greeter props-json="{...}"> ) (docs)
• Atributos nomeados (por exemplo, <x-greeter name="John"> ) (docs)
• Usa API de elementos personalizados (quando disponível)
• Fallback para API compatível para outros navegadores
• Modo Shadow DOM (quando disponível)

Suporte ao navegador

Remount oferece suporte a todos os navegadores compatíveis com React 18.

A API de elementos personalizados ^nº ("Componentes da Web") será usada se estiver disponível (Chrome/67+) e, caso contrário, retornará para uma API compatível.

⚡ Documentos de suporte do navegador →

Documentação

• Documentação da API
• Builds – Builds ES2015+ e ES Module também são fornecidos.
• Perguntas frequentes e solução de problemas – comece aqui se encontrar algum problema.
• Comparação com alternativas
• Suporte ao navegador

Obrigado

remontar © 2022, Rico Sta. Cruz. Lançado sob a licença MIT.
De autoria e manutenção de Rico Sta. Cruz com ajuda de colaboradores (lista).

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz