@zooom/integration-react
v0.0.1
Published
A Zooom integration for using React in PHP based websites
Downloads
21
Maintainers
donnikitosReadme
Zooom / React Integration
Utilities
All utilities can be imported from @zooom/integration-react.
registerReactComponent
Use this utility to register a React component as a Web Component and use it in your HTML or PHP website without the need to register a whole app root.
Parameters
registerReactComponent(
name: string,
Component: (props: any) => ReactNode,
options?: Options,
): void;
type Options = {
shadowRoot?: false | 'open' | 'closed' | ShadowRootInit;
prefix?: string; // default - react
};Attention!
Props from the Web Component will be passed as strings to the React component!
Same thing goes for children: Children will read asinnerHTML.trim()and passed to the React component.
Usage
// /src/components/ExampleComponent.tsx
import { registerReactComponent } from '@zooom/integration-react';
type ExampleComponentProps = { class?: string; children?: string };
registerReactComponent(
'example',
function ExampleComponent({
class: className,
children,
}: ExampleComponentProps) {
return (
<div
className={className}
dangerouslySetInnerHTML={{ __html: children }}
/>
);
},
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<react-example
class="absolute top-0 left-0 w-full h-full flex items-center justify-center"
>
Some content in here
</react-example>
<script
type="module"
src="/src/components/ExampleComponent.tsx"
></script>
</body>
</html>