Registry / web-framework / suneditor-react

suneditor-react

library3.6.1jsnpmunverified

suneditor-react provides a convenient React wrapper for the SunEditor WYSIWYG HTML editor. It simplifies integrating a rich text editor into React applications by encapsulating the underlying SunEditor library within a standard React component interface. The current stable version is 3.6.1, and the project appears to have an active release cadence with regular updates addressing bug fixes, performance improvements, and new features. A key differentiator is its explicit support for Next.js via dynamic imports to handle server-side rendering (SSR) compatibility. It also offers fine-grained control over editor configuration, including language settings, form name integration, and the ability to load only necessary plugins for performance optimization, differentiating it from simpler wrappers that might bundle all features by default. It requires the base `suneditor` package as a peer dependency, giving users control over its version.

web-framework

npm install suneditor-react

github ↗package ↗

INSTALL

IMPORT

SIG · SUNEDITOR-REACT

suneditor-react

web-frameworkjavascriptv3.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SunEditor

✓ import SunEditor from 'suneditor-react';

✗ const SunEditor = require('suneditor-react');

Primarily designed for ESM imports in modern React applications. CommonJS 'require' might lead to bundling issues or incorrect module resolution, especially in build environments expecting ESM.

SunEditor CSS

✓ import 'suneditor/dist/css/suneditor.min.css';

The core SunEditor CSS must be imported manually to style the editor. Forgetting this will result in an unstyled, broken-looking editor.

SunEditor (Next.js)

✓ import dynamic from 'next/dynamic'; const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });

✗ import SunEditor from 'suneditor-react';

When using Next.js or other SSR frameworks, SunEditor must be dynamically imported with `ssr: false` to prevent 'document is not defined' errors during server-side rendering, as the editor relies on browser APIs.

SunEditorCore (TypeScript)

✓ import SunEditorCore from 'suneditor/src/lib/core';

For TypeScript users who need to type the underlying SunEditor instance (e.g., when using `getSunEditorInstance` with `useRef`), import `SunEditorCore` directly from the `suneditor` package for accurate type hints.

This example demonstrates how to integrate `suneditor-react` into a Next.js application using dynamic imports, access the underlying SunEditor instance via a ref, set initial content, and handle content changes.

import React from 'react'; import dynamic from 'next/dynamic'; import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File // Important: Dynamic import for Next.js to disable SSR const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false, }); const MyRichTextEditor = () => { const editorRef = React.useRef(); // The sunEditor parameter will be set to the core suneditor instance const getEditorInstance = (sunEditor) => { editorRef.current = sunEditor; if (editorRef.current) { console.log('SunEditor instance ready:', editorRef.current); // Example: Set initial content programmatically // editorRef.current.setContents('<p>Hello from <b>suneditor-react</b>!</p>'); } }; const handleEditorChange = (content) => { console.log('Editor content changed:', content); }; return ( <div> <h1>My Blog Post Editor</h1> <SunEditor getSunEditorInstance={getEditorInstance} onChange={handleEditorChange} setOptions={{ height: '200px', buttonList: [['undo', 'redo'], ['font', 'fontSize', 'formatBlock'], ['bold', 'underline', 'italic', 'strike'], ['align', 'list'], ['image', 'link']], lang: 'en' // Example language setting }} defaultValue="<p>Start typing your content here...</p>" /> <button onClick={() => console.log('Current content:', editorRef.current?.getContents())}> Log Current Content </button> </div> ); }; export default MyRichTextEditor;

Debug

Known issues

breakingThe order of parameters for `onImageUploadBefore`, `onVideoUploadBefore`, and `onAudioUploadBefore` event handlers was fixed.

fix

Review and adjust the parameter order in your callback functions for these specific upload events if you are upgrading from an earlier version and using these props. Refer to the official SunEditor documentation for the correct signature.

affects: >=3.6.1

gotchaThe `suneditor` core package is a peer dependency and must be installed separately alongside `suneditor-react`.

fix

Ensure you run `npm install --save suneditor suneditor-react` or `yarn add suneditor suneditor-react` when setting up the package.

affects: >=1.0.0

gotchaWhen using Server-Side Rendering (SSR) frameworks like Next.js, importing `SunEditor` directly will cause 'document is not defined' errors during build or server-side execution.

fix

Always use Next.js's `dynamic` import with `ssr: false` to ensure the component is only loaded on the client-side. Refer to the 'Next.js' section in the package's README.

affects: >=1.0.0

gotchaAccessing the underlying SunEditor instance (the 'core' object) directly from event callbacks is not supported by `suneditor-react`. You need to use the `getSunEditorInstance` prop.

fix

Pass a callback function to the `getSunEditorInstance` prop and store the returned `sunEditor` instance in a `useRef` hook. You can then interact with the core editor methods via this ref.

affects: >=1.0.0

gotchaFor optimal performance, especially with many plugins, it's recommended to load only the plugins you need.

fix

Override the `plugins` option within the `setOptions` prop to specify an array of desired plugin names. If `plugins` is not specified, all default plugins are loaded.

affects: >=3.3.0

Errors

Common errors & fixes

ReferenceError: document is not defined

Attempting to render `SunEditor` on the server-side in an SSR environment (e.g., Next.js) without disabling SSR for the component.

fix

Wrap the `SunEditor` component with `next/dynamic` and set `ssr: false`. Example: `const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });`

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Forgetting to install the `suneditor` core package, which `suneditor-react` depends on, or an incorrect import statement.

fix

Ensure both `suneditor` and `suneditor-react` are installed (`npm install suneditor suneditor-react`) and that `SunEditor` is imported correctly as a default import: `import SunEditor from 'suneditor-react';`

Cannot read properties of undefined (reading 'setContents')

Attempting to call methods on the `SunEditor` core instance (e.g., `setContents`, `getContents`) before it has been initialized or when the ref is not correctly pointing to the instance.

fix

Use the `getSunEditorInstance` prop to obtain the core SunEditor object and store it in a `useRef` hook. Ensure you check if the ref's `current` value is available before attempting to call methods on it.

Upgrade

Version history

3.6.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React component.

react-domrequiredPeer dependency required for rendering React components to the DOM.

suneditorrequiredThe core WYSIWYG editor library that suneditor-react wraps. Must be installed separately.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/mkhstar/suneditor-react ↗

packagehttps://www.npmjs.com/package/suneditor-react ↗