danielbrodin / react-marky-markdown

Markdown editor component for react

React Marky Markdown

A clean markdown editor for react.

Currently in beta. Like this readme :)

Usage

yarn add react-marky-markdown

import { Editor, Mention } from 'react-marky-markdown';
// Includes necessary styling
import 'react-marky-markdown/dist/styles.css';

const App = () => {
  return (
    <Editor>
      <Mention
        prefix="@"
        data={[
          { value: 'terminator', label: 'Arnold Schwarzenegger' },
          { value: 'markymark', label: 'Mark wahlberg' },
        ]}
      />
    </Editor>
  );
};

Props

// Editor
{
  defaultValue?: string;
  singleLine?: boolean;
  disableFormatting?: boolean;
  onChange?(value: string): void;
  onSubmit?(): void;
  onBlur?(): void;
  onCancel?(): void;
}

// Mention
{
  prefix: string;
  data: Item[]; // { value: string | number; label: string; }
  onSearch?(value: string): void;
}