@koeroesi86/react-reviver
v23.3.4329683321-main
Published
React component reviver
Downloads
24
Readme
@koeroesi86/react-reviver
Dependencies
Usage
yarn add @koeroesi86/react-reviver
/* eslint-disable react/prop-types */
import React from "react";
import ReactDOM from "react-dom";
import { ReviverProvider, ReviverLayout, ComponentRegistry, RevivableComponentType } from "@koeroesi86/react-reviver";
export const components: ComponentRegistry = {
wrapper: ({ children, background }) => <div style={{ backgroundColor: background }}>{children}</div>,
hello: ({ text }) => <h1>{text}</h1>,
}
type RevivableComponent =
| RevivableComponentType<"wrapper", { background: string }, RevivableComponent>
| RevivableComponentType<"hello", { text: string }, RevivableComponent>;
export const layout: RevivableComponent = {
type: "wrapper",
props: { background: "#efefef" },
children: [
{ type: "hello", props: { text: "It works!" }, children: [] },
]
};
if (window && document.getElementById("root")) {
ReactDOM.render(
<ReviverProvider components={components}>
Example:
<ReviverLayout data={layout}/>
</ReviverProvider>,
document.getElementById("root"),
);
}
Running locally
yarn dev
Open example/index.html in the browser.