remount

Remonta

Utilice sus componentes React en cualquier lugar de su
HTML como componentes web (elementos personalizados).

Demostración ⚡ Documentos
2kb gzip'd · Sin dependencias · Soporte IE

Instalación

Remount está disponible a través del repositorio de paquetes npm. Se requiere reaccionar 18.

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

• A través de hilo: yarn add remount
• o npm: npm install remount

Uso

Comencemos con cualquier componente de React. Aquí hay uno:

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

Utilice define() para definir elementos personalizados. Definamos un elemento <x-greeter> :

 import { define } from 'remount'

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

¡Ahora puedes usarlo en cualquier parte de tu HTML! ?

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

⚡ Documentación API →

Casos de uso

Algunas ideas sobre por qué podría considerar Remount para su proyecto:

	Agregar React a aplicaciones que no son SPA Puede utilizar componentes de React en cualquier página de un sitio HTML "normal". Excelente para agregar React a aplicaciones creadas en Rails o Phoenix.
	? Interoperabilidad con otros marcos Remount te permite usar tus componentes de React como cualquier otro elemento HTML. Esto significa que puede usar React con Vue, Angular o cualquier otra biblioteca/marco DOM.

Más funciones

• Accesorios JSON (p. ej., <x-greeter props-json="{...}"> ) (docs)
• Atributos con nombre (p. ej., <x-greeter name="John"> ) (docs)
• Utiliza API de elementos personalizados (cuando esté disponible)
• Alternativa a API compatible para otros navegadores
• Modo Shadow DOM (cuando esté disponible)

Soporte del navegador

Remount es compatible con todos los navegadores compatibles con React 18.

Se utilizará el ^número de API de elementos personalizados ("Componentes web") si está disponible (Chrome/67+) y, en caso contrario, recurrirá a una API compatible.

⚡ Documentos de soporte del navegador →

Documentación

• Documentación API
• Compilaciones: también se proporcionan compilaciones de ES2015+ y ES Module.
• Preguntas frecuentes y solución de problemas: comience aquí si encuentra algún problema.
• Comparación con alternativas
• Soporte del navegador

Gracias

remontar © 2022, Rico Sta. Cruz. Publicado bajo la licencia MIT.
Escrito y mantenido por Rico Sta. Cruz con ayuda de colaboradores (lista).

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz