Skip to content

Fedeorlandau/jodit-react-ts

Repository files navigation

React Jodit Wrapper

A React wrapper for Jodit that works.

NPM version ci Downloads

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

License: MIT