remount Télécharger - remount le téléchargement du code source

remount

Autre code source

v1.0.0

Télécharger

Remonter sur

Utilisez vos composants React n'importe où dans votre
HTML en tant que composants Web (éléments personnalisés).

Démo ⚡ Documents
2 Ko gzip'd · Aucune dépendance · Prise en charge d'IE

Installation

Le remontage est disponible via le référentiel de packages npm. La réaction 18 est requise.

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

Via fil : yarn add remount
ou npm : npm install remount

Usage

Commençons par n'importe quel composant React. En voici un :

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

Utilisez finish() pour définir des éléments personnalisés. Définissons un élément <x-greeter> :

 import { define } from 'remount'

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

Vous pouvez désormais l'utiliser n'importe où dans votre HTML ! ?

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

⚡Documentation API →

Cas d'utilisation

Quelques idées sur les raisons pour lesquelles vous pourriez envisager Remount pour votre projet :


	Ajout de React aux applications non-SPA Vous pouvez utiliser les composants React sur n'importe quelle page d'un site HTML "normal". Idéal pour ajouter React aux applications construites sur Rails ou Phoenix.

	? Interopérabilité avec d'autres frameworks Remount vous permet d'utiliser vos composants React comme n'importe quel autre élément HTML. Cela signifie que vous pouvez utiliser React avec Vue, Angular ou toute autre bibliothèque/framework DOM.

Plus de fonctionnalités

Accessoires JSON (par exemple, <x-greeter props-json="{...}"> ) (docs)
Attributs nommés (par exemple, <x-greeter name="John"> ) (docs)
Utilise l'API d'éléments personnalisés (si disponible)
Repli vers une API compatible pour les autres navigateurs
Mode Shadow DOM (si disponible)

Prise en charge du navigateur

Remount prend en charge tous les navigateurs pris en charge par React 18.

L'API des éléments personnalisés ^n° (« Composants Web ») sera utilisée si elle est disponible (Chrome/67+), et dans le cas contraire, elle reviendra à une API compatible.

⚡ Documents de support du navigateur →