@eritaakash/react-markdown-editor NPM

React Markdown Editor

React Component to render markdown preview directly into text field.

npm i @eritaakash/react-markdown-editor

Features

It's currently very basic, and all it does is:

Provide a live preview within the text field. The user won't have to switch between "editor" and "preview" section.
Format Bold, Italic and Underline texts as of now.
Provide option for customizable styling of the text editor container.
Provide option to customize the css of the preview container and markdown textarea.

Usage

In a page file,

import MarkdownEditor from "@eritaakash/react-markdown-editor";
import { useState } from 'react';

export default function Home() {
  /* text is the state that will be used to store the markdown text of the editor */
  const [text, setText] = useState('');

  return (
    <MarkdownEditor 
        text={text} 
        setText={setText} 
    />
  );
};

It results in:

React Markdown Editor Preview

Customization

You can customie the styling of the component through the linked css file, using the .r-md_customStyle selector. The default style is:

.r-md_customStyle {
    height: 30rem;
    width: 30rem;
    padding: 10px;
}

It is only useful to change dimension-related properties such as width, height, padding. For a deeper styling, markdown-editor class should be used in your globals.css file.

Custom caret-color

/* global css file (Next.js) */
/* Or, linked css file (React) */

textarea.markdown-editor {
    caret-color: red;
}

result:

React Markdown Editor textarea styling example

⚠ Do not change text or background color through textarea, as its kept transparent.

Text or Background Color

use div.markdown-editor to change the color of background or text

/* global css file (Next.js) */
/* Or, linked css file (React) */

div.markdown-editor {
    color: crimson;
    background-color: black;
}

result:

React Markdown Editor text and background color styling example

Font Size & Adding Custom Font

apply the font to both div and textarea.

/* global css file (Next.js) */
/* Or, linked css file (React) */

textarea.markdown-editor {
    caret-color: grey;

    /* Custom font size */
    font-size: 20px;

    /* Add font family */
    font-family: Poppins, sans-serif;
}

div.markdown-editor {
    color: white;
    background-color: black;

    /* Custom font size */
    font-size: 20px;

    /* Add font family */
    font-family: Poppins, sans-serif;
}

result:

React Markdown Editor custom text font example