/react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor

Primary LanguageTypeScriptMIT LicenseMIT

react-simple-wysiwyg

Build Status NPM version Dependencies status npm bundle size

Simple and lightweight React WYSIWYG editor. Demo.

Description

Screenshot

It can be helpful if you only need basic text operations. It's:

  • pretty small (~11kb, ~4kb gzipped)
  • fast
  • simple to configure
  • simple to extend

Of course, it's not so powerful as other complex editors. It DOES NOT:

  • ✗ change HTML generated by a browser (sometimes it can be too dirty)
  • ✗ sanitize HTML (you can use sanitize-html)
  • ✗ contain a lot of features as others (like table editor, image editor and so on)
  • ✗ support old browsers (IE 11 is minimal)

If you need more powerful solution for React, you'd better take a look at:

Usage

  1. Install with npm:

    npm install react-simple-wysiwyg

    or CDN (unpkg.com)

    <script src="//unpkg.com/react-simple-wysiwyg"></script>

  2. Use the component

    import React from 'react';
import { DefaultEditor } from 'react-simple-wysiwyg';

function App() {
  const [html, setHtml] = React.useState('my <b>HTML</b>');
  
  function onChange(e) {
    setHtml(e.target.value);
  }

  return (
    <DefaultEditor value={html} onChange={onChange} />
  );
}

Credits