@boomslag/nextjs-richtext

A set of rich text editors optimized for Next.js using react-quill.

Features

• Server-side rendering (SSR) safe.
• Pre-configured toolbar options.
• Customizable through props.

Installation

npm install @boomslag/nextjs-richtext

Or if you're using Yarn:

yarn add @boomslag/nextjs-richtext

Usage

Simple Editor

The simple editor offers basic rich text features.

import SimpleEditor from '@boomslag/nextjs-richtext/SimpleEditor';

function MyComponent() {
  const [data, setData] = React.useState("");

  return (
    <SimpleEditor data={data} setData={setData} placeholder="Start typing..." />
  );
}

Advanced RichTextEditor

The RichTextEditor offers a more comprehensive set of rich text tools.

import RichTextEditor from '@boomslag/nextjs-richtext/RichTextEditor';

function MyComponent() {
  const [data, setData] = React.useState("");

  return (
    <RichTextEditor data={data} setData={setData} />
  );
}

Props

For both editors:

• data (string): Current content of the editor.
• setData (function): Function to update the editor's content.
• placeholder (string, optional): Placeholder text for the editor.

Styles

You can further customize the styles by overriding the Quill's CSS or adding additional styles.

The package includes a custom snowy theme located in the styles directory which provides additional styling for the Quill editor. To use this stylesheet, simply import it into your project:

import '@boomslag/nextjs-richtext/styles/snowy.css';

Dependencies

• next
• react
• react-quill

Contributing

For any issues, bugs, or feature requests, please open an issue in our GitHub repository.

License

MIT