@suspensive/react/dist/ClientOnly.mjs

Suspensive interfaces for react

'use client';

import { useIsClient } from "./useIsClient.mjs";
import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.mjs";
import { Fragment, jsx } from "react/jsx-runtime";

//#region src/ClientOnly.tsx
/**
* This component ensures its children are only rendered on the client-side.
* @see {@link https://suspensive.org/docs/react/ClientOnly Suspensive Docs}
* @see {@link https://suspensive.org/docs/react/useIsClient useIsClient} is used internally for environment detection
*/
const ClientOnly = Object.assign(({ children, fallback }) => /* @__PURE__ */ jsx(Fragment, { children: useIsClient() ? children : fallback }), {
	displayName: "ClientOnly",
	with: (clientOnlyProps, Component) => Object.assign((props) => /* @__PURE__ */ jsx(ClientOnly, _objectSpread2(_objectSpread2({}, clientOnlyProps), {}, { children: /* @__PURE__ */ jsx(Component, _objectSpread2({}, props)) })), { displayName: `${ClientOnly.displayName}.with(${Component.displayName || Component.name || "Component"})` })
});

//#endregion
export { ClientOnly };
//# sourceMappingURL=ClientOnly.mjs.map