UNPKG

@liveblocks/react

Version:

A set of React hooks and providers to use Liveblocks declaratively. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

1 lines 2.35 kB
{"version":3,"sources":["/home/runner/work/liveblocks/liveblocks/packages/liveblocks-react/dist/chunk-SCA53Q7P.cjs","../src/version.ts","../src/ClientSideSuspense.tsx"],"names":[],"mappings":"AAAA;ACGO,IAAM,SAAA,EAAW,mBAAA;AACjB,IAAM,YAAA,EAAiD,QAAA;AACvD,IAAM,WAAA,EAAgD,KAAA;ADD7D;AACA;AEJA,8BAA8C;AAkC1C,+CAAA;AAVG,SAAS,kBAAA,CAAmB,KAAA,EAAc;AAC/C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,EAAA,EAAI,6BAAA,KAAc,CAAA;AAE5C,EAAA,8BAAA,CAAU,EAAA,GAAM;AAGd,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAA,uBACE,6BAAA,eAAC,EAAA,EAAS,QAAA,EAAU,KAAA,CAAM,QAAA,EACvB,QAAA,EAAA,QAAA,EACG,OAAO,KAAA,CAAM,SAAA,IAAa,WAAA,EACxB,KAAA,CAAM,QAAA,CAAS,EAAA,EACf,KAAA,CAAM,SAAA,EACR,KAAA,CAAM,SAAA,CACZ,CAAA;AAEJ;AF5BA;AACA;AACE;AACA;AACA;AACA;AACF,iJAAC","file":"/home/runner/work/liveblocks/liveblocks/packages/liveblocks-react/dist/chunk-SCA53Q7P.cjs","sourcesContent":[null,"declare const __VERSION__: string;\ndeclare const TSUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof TSUP_FORMAT === \"string\" && TSUP_FORMAT;\n","import type { ReactNode } from \"react\";\nimport { Suspense, useEffect, useState } from \"react\";\n\ntype Props = {\n fallback: ReactNode;\n children: (() => ReactNode | undefined) | ReactNode | undefined;\n};\n\n/**\n * Almost like a normal <Suspense> component, except that for server-side\n * renders, the fallback will be used.\n *\n * The child props will have to be provided in a function, i.e. change:\n *\n * <Suspense fallback={<Loading />}>\n * <MyRealComponent a={1} />\n * </Suspense>\n *\n * To:\n *\n * <ClientSideSuspense fallback={<Loading />}>\n * <MyRealComponent a={1} />\n * </ClientSideSuspense>\n *\n */\nexport function ClientSideSuspense(props: Props) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n // Effects are never executed on the server side. The point of this is to\n // delay the flipping of this boolean until after hydration has happened.\n setMounted(true);\n }, []);\n\n return (\n <Suspense fallback={props.fallback}>\n {mounted\n ? typeof props.children === \"function\"\n ? props.children()\n : props.children\n : props.fallback}\n </Suspense>\n );\n}\n"]}