Skip to main content

DHTMLX RichText. React integration example

Demo of DHTMLX RichText integration with React using the official GitHub demo. Shows initialization and cleanup for a React-based DHTMLX RichText component. For a step-by-step setup guide, see the detailed React integration guide.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured React app with DHTMLX RichText in seconds. No local setup required.

DHTMLX RichText integrates with React using standard hooks: useRef for the container element and useEffect for initialization and cleanup. The demo wraps the editor in a single reusable component that works like any other React component in your application.

The component creates a Richtext instance inside useEffect, passing richtext_container.current as the mount point along with the configuration. The starting content arrives from the parent as a value prop and is passed into the editor. The effect's cleanup function calls editor.destructor() to release resources when the component unmounts.

Solution overview​

To integrate DHTMLX RichText with React, follow the standard widget lifecycle pattern:

  1. Import the package and styles - import { Richtext } from "@dhx/trial-richtext" and its richtext.css.
  2. Create a container ref using useRef() to get a stable reference to the <div> where RichText mounts.
  3. Initialize in useEffect - call new Richtext(richtext_container.current, { value }) after React renders the component.
  4. Pass initial content via props - the parent provides value, which initializes the editor when the component mounts.
  5. Clean up in the effect's return function by calling editor.destructor() to prevent memory leaks during navigation.

API reference​

Additional resources​