{"id":12101,"library":"suneditor-react","title":"Suneditor React Component","description":"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.","status":"active","version":"3.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/mkhstar/suneditor-react","tags":["javascript","editor","wysiwyg","suneditor","text-editor","word","react","typescript"],"install":[{"cmd":"npm install suneditor-react","lang":"bash","label":"npm"},{"cmd":"yarn add suneditor-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add suneditor-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"The core WYSIWYG editor library that suneditor-react wraps. Must be installed separately.","package":"suneditor","optional":false}],"imports":[{"note":"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.","wrong":"const SunEditor = require('suneditor-react');","symbol":"SunEditor","correct":"import SunEditor from 'suneditor-react';"},{"note":"The core SunEditor CSS must be imported manually to style the editor. Forgetting this will result in an unstyled, broken-looking editor.","symbol":"SunEditor CSS","correct":"import 'suneditor/dist/css/suneditor.min.css';"},{"note":"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.","wrong":"import SunEditor from 'suneditor-react';","symbol":"SunEditor (Next.js)","correct":"import dynamic from 'next/dynamic';\nconst SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });"},{"note":"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.","symbol":"SunEditorCore (TypeScript)","correct":"import SunEditorCore from 'suneditor/src/lib/core';"}],"quickstart":{"code":"import React from 'react';\nimport dynamic from 'next/dynamic';\nimport 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File\n\n// Important: Dynamic import for Next.js to disable SSR\nconst SunEditor = dynamic(() => import('suneditor-react'), {\n ssr: false,\n});\n\nconst MyRichTextEditor = () => {\n const editorRef = React.useRef();\n\n // The sunEditor parameter will be set to the core suneditor instance\n const getEditorInstance = (sunEditor) => {\n editorRef.current = sunEditor;\n if (editorRef.current) {\n console.log('SunEditor instance ready:', editorRef.current);\n // Example: Set initial content programmatically\n // editorRef.current.setContents('
\n );\n};\n\nexport default MyRichTextEditor;\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The order of parameters for `onImageUploadBefore`, `onVideoUploadBefore`, and `onAudioUploadBefore` event handlers was fixed.","severity":"breaking","affected_versions":">=3.6.1"},{"fix":"Ensure you run `npm install --save suneditor suneditor-react` or `yarn add suneditor suneditor-react` when setting up the package.","message":"The `suneditor` core package is a peer dependency and must be installed separately alongside `suneditor-react`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Accessing the underlying SunEditor instance (the 'core' object) directly from event callbacks is not supported by `suneditor-react`. You need to use the `getSunEditorInstance` prop.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"For optimal performance, especially with many plugins, it's recommended to load only the plugins you need.","severity":"gotcha","affected_versions":">=3.3.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap the `SunEditor` component with `next/dynamic` and set `ssr: false`. Example: `const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });`","cause":"Attempting to render `SunEditor` on the server-side in an SSR environment (e.g., Next.js) without disabling SSR for the component.","error":"ReferenceError: document is not defined"},{"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';`","cause":"Forgetting to install the `suneditor` core package, which `suneditor-react` depends on, or an incorrect import statement.","error":"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."},{"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.","cause":"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.","error":"Cannot read properties of undefined (reading 'setContents')"}],"ecosystem":"npm"}