For basic usage, we will use this simple React component:
const Greeting = () => {
return <h1>Hello, World!</h1>;
};With our React component complete, all we have to do is call r2wc and customElements.define to create and define our custom element:
import { r2wc } from "r2wc";
const WebGreeting = r2wc(Greeting);
customElements.define("web-greeting", WebGreeting);Now we can use <web-greeting> like any other HTML element!
<body>
<h1>Greeting Demo</h1>
<web-greeting></web-greeting>
</body>By default, custom elements created by r2wc only pass properties to the underlying React component. To make attributes work, you must specify your component's props.
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
const WebGreeting = r2wc(Greeting, {
props: {
name: "string",
},
});Now r2wc will know to look for name attributes
as follows:
<body>
<h1>Greeting Demo</h1>
<web-greeting name="Justin"></web-greeting>
</body>const component = r2wc(App, {
props: {
onCountUpdated: "function",
title: "string",
complex: "json",
},
});
customElements.define("app-component", component);function App() {
useScript("http://localhost:3000/index.es.js");
const [count, setCount] = useState(0);
const func = (count: number) => {
setCount(count);
};
const [title, setTitle] = useState("");
const [complex, setComplex] = useState({
name: "",
value: "",
});
useEffect(() => {
setTitle(count % 2 === 0 ? "Foo" : "Bar");
setComplex({
name: `Counter is: ${count}`,
value: `Value: ${count}`,
});
}, [count]);
return (
<>
<h2>Consumer</h2>
<app-component
onCountUpdated={func}
title={title}
complex={complex}
></app-component>
</>
);
}<body>
<div id="root">
<h2>Consumer</h2>
<app-component
id="app"
on-count-updated="onUpdated"
title=""
complex="{}"
></app-component>
</div>
<script>
window.onload = () => {
onUpdated(0);
};
const app = document.getElementById("app");
function onUpdated(count) {
console.log(count);
app.props = {
title: count % 2 === 0 ? "Foo" : "Bar",
complex: {
name: `Counter is: ${count}`,
value: `Value: ${count}`,
},
};
}
</script>
<script src="http://localhost:3000/index.es.js"></script>
</body>To install from npm:
npm install r2wc
Contributions are always welcome!