React Jodit Wrapper

A React wrapper for Jodit that works.

Demo

Typescript CodeSandbox

Javascript CodeSandbox

Install

npm install jodit-react-ts jodit

Usage

• Usage Example with TSX/Typescript

import * as React from 'react';
import JoditReact from "jodit-react-ts";
import 'jodit/build/jodit.min.css';

const App = () => {
  const [value, setValue] = React.useState<string>();

  return (
    <>
      <JoditReact onChange={(content) => setValue(content)} defaultValue="Hi" />
      {value}
    </>
  );
};

SSR

• Example of SSR usage.

import * as React from 'react';
import 'jodit/build/jodit.min.css';

const JoditReact = React.lazy(() => {
  return import('jodit-react-ts');
});

const MyEditorWrapper = () => {
  const isSSR = typeof window === 'undefined';
  const [value, setValue] = React.useState<string>();

  return (
     <div>
      {!isSSR && (
        <React.Suspense fallback={<div>Loading</div>}>
            <JoditReact onChange={(content) => setValue(content)} defaultValue="Hi" />
        </React.Suspense>
      )}
    </div>
  );
};

Config

• Example of jodit config

import * as React from 'react';
import JoditReact from "jodit-react-ts";
import 'jodit/build/jodit.min.css';

/** 
 * This needs to be defined outside the scope of our wrapper otherwise will cause multiple re-renders
 **/

const config = {
  preset: 'inline'
};

const App = () => {
  const [value, setValue] = React.useState<string>();

  return (
    <>
      <JoditReact onChange={(content) => setValue(content)} defaultValue="Hi" config={config} />
      {value}
    </>
  );
};

Props

| Property | Type | Required | Description | | ---------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onChange | (content: string) => void | Yes | Callback to update a value state to keep track of the editor's content. | | config | IJodit["options"] | No | Jodit configuration object. | | defaultValue | string | no | Default content to be rendered on the editor. |

:hammer_and_wrench: Support

Please open an issue for support.

:memo: Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

:scroll: License