Skip to content

Commit

Permalink
docs: clarify stylesheet dependency (#300)
Browse files Browse the repository at this point in the history
  • Loading branch information
j-weave authored Jan 13, 2024
1 parent c3b8847 commit 148ac50
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down

0 comments on commit 148ac50

Please sign in to comment.