@yamada-ui/react/dist/cjs/components/client-only/client-only.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"client-only.cjs","names":["ClientOnly: FC<ClientOnlyProps>","Show","useMounted"],"sources":["../../../../src/components/client-only/client-only.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { useMounted } from \"../../hooks/use-mounted\"\nimport { Show } from \"../show\"\n\nexport interface ClientOnlyProps {\n  /**\n   * The content to render on the client side.\n   *\n   * **Note:** Use the function pattern when accessing browser-only APIs.\n   */\n  children: ReactNodeOrFunction\n  /**\n   * The fallback content to render while the component is mounting on the client\n   * side.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * `ClientOnly` is a component that renders its children only on the client side.\n *\n * @see https://yamada-ui.com/docs/components/client-only\n */\nexport const ClientOnly: FC<ClientOnlyProps> = ({ children, fallback }) => {\n  const mounted = useMounted({ state: true })\n\n  return (\n    <Show fallback={fallback} when={mounted}>\n      {children}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAaA,cAAmC,EAAE,UAAU,eAAe;AAGzE,QACE,2CAACC;EAAe;EAAU,MAHZC,2CAAW,EAAE,OAAO,MAAM,CAAC;EAItC;GACI"}