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.

🛠️ Support

Please open an issue for support.

📝 Contributing

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

📜 License