📝 PM React Text Editor

A customizable and lightweight rich-text editor for React, built with hooks and modern styling. Supports common formatting tools like bold, italic, lists, headings, links, and more.

🔗 About me

🛠 Usage Example

import PMEditor from "pm-react-text-editor";
import { useState } from "react";

function App() {
  const [editorValue, setEditorValue] = useState("");

  return (
    <div>
      <PMEditor value={editorValue} onChange={setEditorValue} />
    </div>
  );
}

export default App;

Import the css file in your App.css or App.scss

@import '../node_modules/pm-react-text-editor/dist/index.css';

📥 Props Explanation

value (optional)

value?: string

The value prop allows you to set the initial content of the editor. This can be useful for loading saved content or pre-filling the editor with a template or existing text.

onChange (required)

onChange: (content: string) => void

The onChange callback is triggered every time the editor content changes. You can use this to:

• Store the current content in your local component state.
• Sync the content with a form or backend.
• Enable auto-save features.

🎨 Features

• Rich text formatting (bold, italic, underline, alignment, lists, headings)
• Insert links and images
• Keyboard shortcuts
• ContentEditable with controlled value

👁️ How it looks like

🚀 Installation

npm install pm-react-text-editor