react-intlayer/dist/esm/html/HTMLRenderer.mjs

Easily internationalize i18n your React applications with type-safe multilingual content management.

'use client';

import { useHTMLContext } from "./HTMLProvider.mjs";
import { getHTML } from "@intlayer/core/interpreter";
import { Fragment, createElement } from "react";
import { jsx } from "react/jsx-runtime";
import { VOID_HTML_ELEMENTS } from "@intlayer/core/transpiler";

//#region src/html/HTMLRenderer.tsx
/**
* Renders HTML-like content to JSX with the provided components.
*
* This function does not use context from HTMLProvider. Use `useHTMLRenderer`
* hook if you want to leverage provider context.
*/
const renderHTML = (content, { components = {} } = {}) => {
	const userComponents = Object.fromEntries(Object.entries(components).filter(([, Component]) => Component).map(([key, Component]) => [key, (props) => createElement(Component, props)]));
	return /* @__PURE__ */ jsx(Fragment, { children: getHTML(content, new Proxy(userComponents, { get(target, prop) {
		if (typeof prop === "string" && prop in target) return target[prop];
		if (typeof prop === "string" && /^[a-z][a-z0-9]*$/.test(prop)) {
			if (VOID_HTML_ELEMENTS.has(prop)) return ({ children: _children, ...rest }) => createElement(prop, rest);
			return (props) => createElement(prop, props);
		}
	} })) });
};
/**
* Hook that returns a function to render HTML content.
*
* This hook considers the configuration from the `HTMLProvider` context if available,
* falling back to the provided components.
*/
const useHTMLRenderer = ({ components } = {}) => {
	const context = useHTMLContext();
	return (content) => {
		return renderHTML(content, { components: {
			...context?.components,
			...components
		} });
	};
};
/**
* React component that renders HTML-like content to JSX.
*
* This component uses the components from the `HTMLProvider` context
* if available.
*/
const HTMLRenderer = ({ children = "", components }) => {
	return useHTMLRenderer({ components })(children);
};

//#endregion
export { HTMLRenderer, renderHTML, useHTMLRenderer };
//# sourceMappingURL=HTMLRenderer.mjs.map