React SimpleMDE Markdown Editor
React component wrapper for SimpleMDE.
Only two dependencies, React and SimpleMDE.
New in v3
- The
initialValue
prop has been removed and replaced with avalue
prop, allowing direct changes to the value to be made after the component mounts. - Updated in v3.6.8, if rendering server-side, you can set static ids to avoid errors in rendering synchronization.
New in v2
Version 1.0 did not have SimpleMDE options configured well, this readme reflects the changes made to better include options. This is still a very new project. Testing, feedback and PRs are welcome and appreciated.
Install
npm install --save react-simplemde-editor
Demo
http://www.benrlodge.com/projects/react-simplemde
or view it locally:
git clone https://github.com/RIP21/react-simplemde-editor.git
cd react-simplemde-editor
yarn install
yarn demo
open browser to localhost:3000
Usage
View the demo code for a full example.
Not required, but useless without it, the onChange
callback is the only option you need to set.
import React from 'react';
import SimpleMDE from 'react-simplemde-editor';
import "simplemde/dist/simplemde.min.css";
<SimpleMDE
onChange={this.handleChange}
/>
The data from SimpleMDE is passed to the handleChange function and you do not need to reference the event.
handleChange = value => {
this.setState({ mdeValue: value });
};
Options
Set additional SimpleMDE options with an options prop.
Note - while SimpleMDE options has an initialValue
option, this component only takes a value
prop which is set as the initialValue
on first render.
Note - if you don't specify a custom id it will automatically generate an id for you.
import React from 'react';
import SimpleMDE from 'react-simplemde-editor';
import "simplemde/dist/simplemde.min.css";
<SimpleMDE
id="your-custom-id"
label="Your label"
onChange={this.handleChange}
value={this.state.textValue}
options={{
autofocus: true,
spellChecker: false,
// etc.
}}
/>
You can include key maps using the extraKeys
prop.
Read more at https://codemirror.net/doc/manual.html#option_extraKeys
extraKeys = {
Up: function(cm) {
cm.replaceSelection(" surprise. ");
},
Down: function(cm) {
cm.replaceSelection(" surprise again! ");
}
};
<SimpleMDE
onChange={this.handleChange}
extraKeys={extraKeys}
/>