ah-text-editor

ah-text-editor The Ad Hoc Text Editor is a versatile editor component designed for seamless integration into React applications. It supports React versions from 15 to the latest, providing robust functionality for both functional and class components.

Installation

To install the package, use the following command:

npm install ah-text-editor

Usage

Importing the Component Import the 'TextEditor' component into your React project:

import TextEditor from 'ah-text-editor'

Functional Components To use the TextEditor in a functional component, follow this example:

import React, { useState } from 'react';
import TextEditor from 'ah-text-editor';

const MyFunctionalComponent = () => {
  const [textEditorValue, setTextEditorValue] = useState('');

  const handleTextEditor = (value) => {
    setTextEditorValue(value);
  };

  return (
    <TextEditor 
      onChange={handleTextEditor}
      content={textEditorValue}
      disabled={false}
      isHideToolbar={false}
    />
  );
};

export default MyFunctionalComponent;

Class Components To use the 'TextEditor' in a class component, follow this example:

import React, { Component } from 'react';
import TextEditor from 'ah-text-editor';

class MyClassComponent extends Component {
  state = {
    content: ''
  };

  handleTnCChange = (value) => {
    this.setState({ content: value });
  };

  render() {
    return (
      <TextEditor 
        onChange={this.handleTnCChange}
        content={this.state.content}
        disabled={false}
        isHideToolbar={false}
      />
    );
  }
}

export default MyClassComponent;

Features

* Compatible with React 15 and newer versions.
* Supports both functional and class components.
* Customizable toolbar options.

Props

* onChange: Function called with the updated content.
* content: The initial content of the editor.
* disabled: Boolean to enable or disable the editor.
* isHideToolbar: Boolean to show or hide the toolbar.

License

This project is licensed under the MIT License.

Feel free to copy and paste this markdown into your README file. Let me know if you need any changes or additional sections!