react-mui-draft-wysiwyg

React component that allows to use a rich editor based on Material UI and Draft-js

Install

if you don't have Material UI installed yet:

https://material-ui.com/getting-started/installation/

Then install the editor:

With npm:

npm install --save @material-ui/icons draft-js react-mui-draft-wysiwyg

Or with yarn:

yarn add @material-ui/icons draft-js react-mui-draft-wysiwyg

Imports

import MUIEditor, { MUIEditorState } from "react-mui-draft-wysiwyg";

Basic usage

() => {
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return <MUIEditor editorState={editorState} onChange={onChange} />
}

() => {
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return <MUIEditor editorState={editorState} onChange={onChange} />
}

MUIEditor Properties

editorState

object

required

onChange

func

required

onFocus

func

null

onBlur

func

null

config

object

defaultConfig

react-mui-draft-wysiwyg

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Install

Imports

Basic usage

MUIEditor Properties

Install