From 148ac504126cfde9e9c5f24d182119daff87113f Mon Sep 17 00:00:00 2001 From: Justice Gray <153478045+j-weave@users.noreply.github.com> Date: Sat, 13 Jan 2024 00:06:14 -0800 Subject: [PATCH] docs: clarify stylesheet dependency (#300) --- docs/getting-started.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 1fe1dd86..b95209c5 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -16,17 +16,18 @@ To use MDXEditor in your project, install the `@mdxeditor/editor` NPM package in npm install --save @mdxeditor/editor ``` -## Importing the component +Afterwards, you can import the React component and use it in your project. You need to include the CSS file as well, either as an import in React or in your project stylesheet. Follow the instructions below for your framework of choice. -Note: the package is tree-shakeable, which means that your bundle will only include the parts you use. - -Following are the specifics below for the most popular React frameworks. +```tsx +import { MDXEditor } from '@mdxeditor/editor' +import '@mdxeditor/editor/style.css' +``` ### Next.js (App router) -MDXEditor does not support server rendering, so we need to ensure that the editor component is rendered only on the client. Given its purpose, it makes little to no sense to do server processing anyway. To do so, we can use the `dynamic` function from Next.js. This will ensure that the component is only loaded on the client. +MDXEditor does not support server rendering, so we need to ensure that the editor component is rendered only on client-side. To do so, we can use the [`dynamic` utility](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) with `{ssr: false}`. -**NOTE:** Make sure all plugins are initialized client-side only, too. Using some plugins will cause hydration errors if imported during SSR. +**NOTE:** Make sure that the editor plugins are initialized client-side only, too. Using some plugins will cause hydration errors if imported during SSR. ```tsx 'use client'