@suspensive/react/dist/ClientOnly.mjs.map

Suspensive interfaces for react

{"version":3,"file":"ClientOnly.mjs","names":[],"sources":["../src/ClientOnly.tsx"],"sourcesContent":["'use client'\nimport type { ComponentProps, ComponentType, ReactNode } from 'react'\nimport { useIsClient } from './useIsClient'\nimport type { PropsWithoutChildren } from './utility-types/PropsWithoutChildren'\n\nexport interface ClientOnlyProps {\n  children: ReactNode\n  fallback?: ReactNode\n}\n\n/**\n * This component ensures its children are only rendered on the client-side.\n * @see {@link https://suspensive.org/docs/react/ClientOnly Suspensive Docs}\n * @see {@link https://suspensive.org/docs/react/useIsClient useIsClient} is used internally for environment detection\n */\nexport const ClientOnly = Object.assign(\n  ({ children, fallback }: ClientOnlyProps) => <>{useIsClient() ? children : fallback}</>,\n  {\n    displayName: 'ClientOnly',\n    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(\n      clientOnlyProps: PropsWithoutChildren<ClientOnlyProps>,\n      Component: ComponentType<TProps>\n    ) =>\n      Object.assign(\n        (props: TProps) => (\n          <ClientOnly {...clientOnlyProps}>\n            <Component {...props} />\n          </ClientOnly>\n        ),\n        { displayName: `${ClientOnly.displayName}.with(${Component.displayName || Component.name || 'Component'})` }\n      ),\n  }\n)\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,aAAa,OAAO,QAC9B,EAAE,UAAU,eAAgC,0CAAG,YAAY,IAAI,WAAW,SAAW,IACtF;CACE,aAAa;CACb,OACE,iBACA,cAEA,OAAO,QACJ,UACC,oBAAC,8CAAe,kCACd,oBAAC,8BAAc,KAAQ,IACb,IAEd,EAAE,aAAa,GAAG,WAAW,YAAY,QAAQ,UAAU,eAAe,UAAU,QAAQ,YAAY,GAAG,CAC7G;AACJ,CACF"}