Nostalgic Piano Music

    jodit-react-ts
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    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

    Install

    npm i jodit-react-ts

    DownloadsWeekly Downloads

    144

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • fedeorlandau