import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,em:`em`,h1:`h1`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,strong:`strong`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Applications`}),`
`,(0,c.jsx)(t.h1,{id:`installation-applications`,children:`Installation: Applications`}),`
`,(0,c.jsx)(t.p,{children:`This guide applies to both client-side and server-side rendered React applications.`}),`
`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
`,(0,c.jsxs)(t.p,{children:[`Our packages are available in the `,(0,c.jsx)(t.a,{href:`https://www.npmjs.com/search?q=%40preply`,rel:`nofollow`,children:`npm`}),` registry under the `,(0,c.jsx)(t.code,{children:`@preply`}),` namespace.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add @preply/ds-web-lib @preply/ds-web-root
`})}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-root`}),` provides a single entry point to instantiate all the necessary resources in your application.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` provides the collection of components documented for the web platform.`]}),`
`]}),`
`,(0,c.jsx)(t.h2,{id:`add-the-global-styles`,children:`Add the global styles`}),`
`,(0,c.jsxs)(t.p,{children:[`In the `,(0,c.jsx)(t.code,{children:`index.html`}),` file, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<!-- Preply DS Global Style https://ds.preply.org/latest/?path=/story/guides-installation-applications--page -->
<link rel="preconnect" href="https://static.preply.com" />
<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
<link
    rel="preload"
    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
/>
<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
`})}),`
`,(0,c.jsx)(t.p,{children:`This CSS resource contains:`}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@font-face`}),` declarations for loading `,(0,c.jsx)(t.code,{children:`PreplyInter`}),`. See `,(0,c.jsx)(t.a,{href:`/story/guides-assets-fonts--page`,children:`Guides / Assets / Fonts`})]}),`
`,(0,c.jsxs)(t.li,{children:[`global `,(0,c.jsx)(t.code,{children:`font-family`}),` declarations`]}),`
`]}),`
`,(0,c.jsx)(t.p,{children:(0,c.jsx)(t.strong,{children:`Notes:`})}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsx)(t.li,{children:`In the future, this global stylesheet will also contain generic reset rules.`}),`
`,(0,c.jsxs)(t.li,{children:[`If your app is rendered server side with dynamic `,(0,c.jsx)(t.code,{children:`<head>`}),` content, follow the instructions in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-ssr--page`,children:`Installation: SSR`}),` guide instead.`]}),`
`]}),`
`,(0,c.jsxs)(t.h2,{id:`add-rootprovider`,children:[`Add `,(0,c.jsx)(t.code,{children:`RootProvider`})]}),`
`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`<RootProvider/>`}),` wraps all the other providers and makes sure the CSS classes are added to your DOM. You will need to wrap your code with it.`]}),`
`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`target`}),` prop determines where to inject the CSS classes and you can provide the DOM element `,(0,c.jsx)(t.code,{children:`document.body`}),` in order to have the CSS classes in scope for components rendered anywhere in the page, including `,(0,c.jsx)(t.em,{children:`portals`}),` outside of `,(0,c.jsx)(t.code,{children:`<div id="root">`}),`.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { RootProvider } from '@preply/ds-web-root';

ReactDOM.render(
    <React.StrictMode>
        <RootProvider target={document.body} theme="tokyo-ui">
            <App />
        </RootProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);
`})}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Note:`}),` If your app is rendered server side, continue with the instructions in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-ssr--page`,children:`Installation: SSR`}),` guide.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};