📑 Table of Contents

• Features
• Installation
• Quick Start
• Live Example
• API Reference
• Contributing
• License

✨ Features

Text Formatting

• Bold - Make text stand out
• Italic - Add emphasis
• Underline - Underline text
• Strikethrough - Cross out text
• Subscript - Lower text (H₂O)
• Superscript - Raise text (x²)

Text Styling

• Font Family - Choose fonts
• Font Size - Adjust size
• Text Color - Change color
• Background Color - Highlight text

Alignment

• Left/Center/Right - Align text
• Justify - Distribute evenly

Lists & Structure

• Bullet List - Unordered lists
• Numbered List - Ordered lists
• Headings - Structure content
• Insert Table - Organize data
• Insert Layout - Create layouts

Media & Links

• Hyperlink - Add links
• Image - Insert images

Advanced

• Real-time Content Events 🆕 - Get live updates
• Get HTML/JSON - Export content
• Custom Height - Set editor height

📦 Installation

# npm
npm install @mindfiredigital/textigniter-react

# yarn
yarn add @mindfiredigital/textigniter-react

# pnpm
pnpm add @mindfiredigital/textigniter-react

🚀 Quick Start

Basic Usage

import { Textigniter } from '@mindfiredigital/textigniter-react';

function App() {
  return (
    <Textigniter
      config={{
        showToolbar: true,
        features: [
          'bold',
          'italic',
          'underline',
          'fontFamily',
          'fontSize',
          'fontColor',
          'alignLeft',
          'alignCenter',
          'alignRight',
          'unorderedList',
          'orderedList',
          'hyperlink',
          'image',
        ],
      }}
    />
  );
}

With Real-time Updates 🆕

import { useState } from 'react';
import { Textigniter } from '@mindfiredigital/textigniter-react';

function App() {
  const [htmlContent, setHtmlContent] = useState('');
  const [textContent, setTextContent] = useState('');

  const handleContentChange = (data: { html: string; text: string }) => {
    console.log('Content changed:', data);
    setHtmlContent(data.html);
    setTextContent(data.text);
  };

  return (
    <div>
      <Textigniter
        config={{
          showToolbar: true,
          features: ['bold', 'italic', 'underline'],
        }}
        onContentChange={handleContentChange}
      />

      {/* Real-time Preview */}
      <div
        style={{ marginTop: '20px', padding: '20px', border: '1px solid #ccc' }}
      >
        <h3>Live Preview:</h3>
        <div>
          <strong>HTML:</strong>
          <pre>{htmlContent}</pre>
        </div>
        <div>
          <strong>Text:</strong>
          <pre>{textContent}</pre>
        </div>
        <div>
          <strong>Stats:</strong>
          <p>
            Characters: {textContent.length} | Words:{' '}
            {textContent.trim().split(/\s+/).length}
          </p>
        </div>
      </div>
    </div>
  );
}

🎯 Live Example

Want to see it in action? Check out the complete working example in the packages/example/react directory!

Run the Example Locally

# Navigate to the example directory
cd packages/example/react

# Install dependencies
npm install

# Start the dev server
npm run dev

Then open http://localhost:5173 in your browser.

The example demonstrates:

• ✅ Basic integration
• ✅ Real-time content updates
• ✅ Character and word counting
• ✅ HTML and text preview
• ✅ All available features

View Example Code →

📚 API Reference

Component Props

interface TextigniterProps {
  config: EditorConfig;
  onContentChange?: (data: ContentChangeData) => void;
}

Configuration

interface EditorConfig {
  showToolbar?: boolean; // Show/hide toolbar (default: true)
  features?: string[]; // Array of feature names
  height?: string; // Editor height (e.g., '500px')
  placeholder?: string; // Placeholder text
}

Content Change Event

interface ContentChangeData {
  html: string; // Formatted HTML content
  text: string; // Plain text without tags
}

const handleContentChange = (data: ContentChangeData) => {
  // Your code here
};

Available Features

const features = [
  // Text formatting
  'bold',
  'italic',
  'underline',
  'strikethrough',
  'subscript',
  'superscript',

  // Text styling
  'fontFamily',
  'fontSize',
  'fontColor',
  'bgColor',

  // Alignment
  'alignLeft',
  'alignCenter',
  'alignRight',
  'justify',

  // Lists
  'unorderedList',
  'orderedList',

  // Content
  'heading',
  'hyperlink',
  'image',

  // Structure
  'insertTable',
  'insertLayout',

  // Actions
  'getHtmlContent',
  'loadHtmlContent',
];

💡 Common Use Cases

Auto-Save

useEffect(() => {
  if (!content.html) return;

  const timer = setTimeout(() => {
    fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify({ content: content.html }),
    });
  }, 2000);

  return () => clearTimeout(timer);
}, [content]);

Character Counter

const charCount = textContent.length;
const wordCount = textContent
  .trim()
  .split(/\s+/)
  .filter(w => w.length > 0).length;

Form Integration

<form onSubmit={handleSubmit}>
  <Textigniter
    config={{ showToolbar: true, features: ['bold', 'italic'] }}
    onContentChange={data => setFormData({ ...formData, content: data.html })}
  />
  <button type="submit">Submit</button>
</form>

🤝 Contributing

We welcome contributions from the community! If you'd like to contribute to TextIgniter React:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please read our Contributing Guidelines for more details.

📄 License

Copyright (c) Mindfire Digital LLP. All rights reserved.

Licensed under the MIT License. See LICENSE file for details.

🔗 Links

• NPM Package: https://www.npmjs.com/package/@mindfiredigital/textigniter-react
• GitHub Repository: https://github.com/mindfiredigital/textigniterjs
• Documentation: https://github.com/mindfiredigital/textigniterjs/tree/main/docs
• Issues: https://github.com/mindfiredigital/textigniterjs/issues

Related Packages

• Core: @mindfiredigital/textigniter
• Angular: @mindfiredigital/textigniter-angular
• Web Component: @mindfiredigital/textigniter-web-component

🌟 Why TextIgniter React?

• 🚀 Lightweight - Minimal bundle size
• 💪 Powerful - Rich feature set
• ⚛️ React Native - Built with React best practices
• 🪝 Modern Hooks - Uses React Hooks API
• 🔒 Type Safe - Full TypeScript support
• 📱 Responsive - Works on all devices
• 📚 Well Documented - Comprehensive docs and examples
• 🆓 Open Source - MIT licensed