React wrapper for simplemde markdown editor

Ben Lodge a5ca577688 Merge pull request #15 from benrlodge/add_dist_dir		9 years ago
demo	505aa20cd7 cleanup demo	9 years ago
dist	20a9731ddb add dist directory	9 years ago
src	73e6eacb1c allow multiple editors to be used on one page	9 years ago
.gitignore	b13ab978e5 remove logs	9 years ago
README.md	c0f631177b update readme	9 years ago
package.json	0a1d6e7e6c fix version	9 years ago
webpack.config.js	20a9731ddb add dist directory	9 years ago

React SimpleMDE Markdown Editor

React component wrapper for SimpleMDE.

Contribute

This is a WIP, if you find this component useful, contributions are appreciated, see issues.

New in version 3.0

The initialValue prop has been removed and replaced with a value prop, allowing direct changes to the value to be made after the component mounts.

New in version 2.0

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/benrlodge/react-simplemde-editor.git
cd react-simplemde-editor
npm install
cd demo
gulp
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.

var React = require('react');
var SimpleMDE = require('react-simplemde-editor');

<SimpleMDE
  onChange={this.handleChange}
/>

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.

var React = require('react');
var SimpleMDE = require('react-simplemde-editor');

<SimpleMDEReact
  onChange={this.handleChange}
  options={{
    autofocus: true,
    spellChecker: false,
    value: this.state.textValue
    // etc.
  }}
/>

README.md