@insidersbyte/react-markdown-editor
v1.0.0
Published
React Markdown editor with preview and drag and drop image support
Downloads
11
Maintainers
Readme
react-markdown-editor
React Markdown editor with preview, built with react-markdown-renderer.
Demo
http://insidersbyte.github.io/react-markdown-editor
Installing
npm install @insidersbyte/react-markdown-editor --save
Basic Usage
import React from 'react';
import ReactDOM from 'react-dom';
import MarkdownEditor from '@insidersbyte/react-markdown-editor';
import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css';
class App extends React.Component {
constructor() {
super();
this.state = {
markdown: '# This is a H1 \n## This is a H2 \n###### This is a H6',
};
this.updateMarkdown = this.updateMarkdown.bind(this);
}
updateMarkdown(event) {
this.setState({ markdown: event.target.value });
}
render() {
return (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Props
- value (string) - the raw markdown that will be converted to html (required)
- onChange (function) - called when a change is made (required)
- options (object) - the options for remarkable (see here) (default: { })
Styles
You can either write your own css for this component or use the one provided. If you want to write your own look at react-markdown-editor.styl for an idea on how to style this component.
Contributing
Contributions are very welcome!
Please note that by submitting a pull request for this project, you agree to license your contribution under the MIT License to this project.
License
Published under the MIT License.