@prismicio/react/dist/SliceZone.js

React components and hooks to fetch and present Prismic content

import { DEV } from "esm-env";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/SliceZone.tsx
/**
* This slice component can be used as a reminder to provide a proper implementation.
*
* This is also the default React component rendered when a component mapping cannot be found in
* `<SliceZone>`.
*/
const TODOSliceComponent = ({ slice }) => {
	if (!DEV) return null;
	const type = "slice_type" in slice ? slice.slice_type : slice.type;
	console.warn(`[SliceZone] Could not find a component for slice type "${type}"`, slice);
	return /* @__PURE__ */ jsxs("section", {
		"data-slice-zone-todo-component": "",
		"data-slice-type": type,
		children: [
			"Could not find a component for slice type “",
			type,
			"”"
		]
	});
};
/**
* Renders slices in a slice zone as React components.
*
* @example
* 	```tsx
* 	<SliceZone slices={page.data.slices} components={components} />;
* 	```
*
* @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}
*/
const SliceZone = (props) => {
	const { slices = [], components = {}, defaultComponent, context = {} } = props;
	return /* @__PURE__ */ jsx(Fragment, { children: slices.map((slice, index) => {
		const type = "slice_type" in slice ? slice.slice_type : slice.type;
		const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`;
		const Comp = components[type] || defaultComponent;
		if (!Comp) return /* @__PURE__ */ jsx(TODOSliceComponent, { slice }, key);
		if (slice.__mapped) {
			const { __mapped, ...mappedProps } = slice;
			return /* @__PURE__ */ jsx(Comp, { ...mappedProps }, key);
		}
		return /* @__PURE__ */ jsx(Comp, {
			slice,
			index,
			slices,
			context
		}, key);
	}) });
};
//#endregion
export { SliceZone, TODOSliceComponent };

//# sourceMappingURL=SliceZone.js.map