1.2.0 • Published 1 year ago
react-headless-markdown-editor v1.2.0
react-headless-markdown-editor
👋 Intro
A React component for simple, customizable markdown editors.
This library lets you:
- Customize your editor however you see fit (it's Headless 🙈)
- Create custom controls
- Have a simple editor up & running in a few seconds
🚀 How to use
Install
npm install -S react-headless-markdown-editor
# or
yarn add react-headless-markdown-editor
# or
pnpm i react-headless-markdown-editor
Usage
With no styling options
import { Editor } from "react-headless-markdown-editor";
<Editor id="body" name="body" rows={25}>
<Editor.H1Control />
<Editor.H2Control />
<Editor.H3Control />
</Editor>;
But it's easy enough to add something.
I've made it work beautifully with normal css classes or tailwind.
import { Editor } from "react-headless-markdown-editor";
<Editor
id="body"
name="body"
rows={25}
// css class for the textarea
className="textarea-class"
// css class for the container
containerClassName="container-class"
// css class for the controls container
controlsClassName="controls-class"
>
<Editor.H1Control className="control-class" />
<Editor.H2Control className="control-class" />
<Editor.H3Control className="control-class" />
</Editor>;
Check out the Demo for an example of styling