React Typeflux

A lightweight, easy-to-use rich text editor and viewer for React applications.

✨ Features

• 📝 Rich text editing
• 👀 Built-in viewer
• 🎨 Pre-styled with TailwindCSS (no extra setup needed)
• 📋 Supports rich paste (copy-paste formatted text)

📦 Installation

npm install react-typeflux

or with yarn:

yarn add react-typeflux

🚀 Usage

import React, { useState } from "react";
import { RichTextEditor, RichTextViewer } from "react-typeflux";
import "react-typeflux/dist/react-typeflux.css";

const MyEditor = () => {
  const [content, setContent] = useState("");

  return (
    <div>
      <RichTextEditor
        value={content}
        onChange={setContent}
        placeholder="Write your blog content…"
        allowRichPaste
      />

      <h2 className="mt-4 font-bold">Preview</h2>
      <RichTextViewer value={content} />
    </div>
  );
};

export default MyEditor;

⚙️ Props

<RichTextEditor />

| Prop | Type | Default | Description | |-----------------|------------|-----------|-------------| | value | string | "" | The editor's current content | | onChange | function | () => {}| Callback when content changes | | placeholder | string | "" | Placeholder text | | allowRichPaste| boolean | false | Whether to allow pasting rich text |

<RichTextViewer />

| Prop | Type | Default | Description | |----------|----------|---------|-------------| | value | string | "" | The content to render |

🛠 Development

To build locally:

git clone https://github.com/haryomidey/react-typeflux.git
cd react-typeflux
npm install
npm run dev

To build for production:

npm run build

📜 License

This project is licensed under the MIT License.

👤 Author

Ayotech – Portfolio