https://github.com/hasiniwijerathna/react-markdown-editor

Markdown Editor for React JS
https://github.com/hasiniwijerathna/react-markdown-editor

markdown-editor react-js react-markdown

Last synced: 3 months ago
JSON representation

Markdown Editor for React JS

• Host: GitHub
• URL: https://github.com/hasiniwijerathna/react-markdown-editor
• Owner: HasiniWijerathna
• Created: 2019-09-22T01:20:16.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-18T09:51:21.000Z (about 2 years ago)
• Last Synced: 2025-04-07T11:48:08.997Z (3 months ago)
• Topics: markdown-editor, react-js, react-markdown
• Language: JavaScript
• Homepage: https://hasiniwijerathna.github.io/React-Markdown-Editor/
• Size: 770 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#  :rocket: React-Markdown-Editor 

> Markdown editor for React JS

[![NPM](https://img.shields.io/npm/v/react-markdown-editor.svg)](https://www.npmjs.com/package/react-markdown-editor) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![NPM](https://nodei.co/npm/react-edit-it.png)](https://nodei.co/npm/react-edit-it/)

![65385802-53455980-dd65-11e9-816b-b18df1efeb72](https://user-images.githubusercontent.com/20472144/232740081-1225c42d-4cc9-496d-a315-2905c273799b.gif)

## Installation 

Can be installed via npm:

```bash

npm install --save react-edit-it 

```

Or ```yarn```

```bash

yarn add react-edit-it 

```

##  :bowtie: Basic Usage 

The most basic use of the markdown editor can be described with:

```jsx

import React, { Component } from "react";

import ReactMarkdownEditor from "react-edit-it";

class Example extends Component {

  onChangeContent = props => {

    // Access Props

  };

  render() {

    return (

      

    );

  }

}

```

```onChangeContent``` event handler fires each time when the content has been edited. You can use it to access the editor text content

![65385837-ed0d0680-dd65-11e9-959f-13d96ed20a48](https://user-images.githubusercontent.com/20472144/232740154-c1d39df9-86ef-42dd-b13e-ec5fdea0a345.gif)

## Compatibility

### React

Compatible with the latest version of 16.x

#### Latest compatible versions:

- 15.x and 16.x

## Options

| Property          | Type           | Description                              |

| ------------------|:--------------:| ----------------------------------------:|

| content           | string         |         Markdown content to be converted |

| onChangeContent   | func           |Called when the editor content is updated |

## Sample Code 

Code sample is available in the /example directory for your perusal. You can execute npm install to generate the necessary dependencies for the examples.

if you haven't, You may need to install,

- npm or nvm (Go with nvm, its much easier to switch versions! :neckbeard:)

- Node 8.16.0 or Node 10.16.0 or later version 

## License

MIT © [HasiniWijerathna](https://github.com/HasiniWijerathna)