React Text Editor

A small, simple and customizable text editor for React applications.

Table of Contents

• Installation
• Usage
• Props
• Requirements
• Contributing

Installation

To install, you can use npm or yarn:

npm install @codifytools/react-text-editor

Usage

import React, { useState, Fragment } from 'react';
import ReactDOM from 'react-dom';
import Editor from '@codifytools/react-text-editor';

const Example = () => {
  const [values, setValues] = useState({ text: '<p>Editor example text</p>' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  }

  return (
    <Fragment>
        <Editor
          field="text"
          html={values.text}
          classes="example-class"
          saveCallback={handleChange}
          placeholder="custon placeholder text..."
       />

       <button onClick={() => console.log(values.text)}>Preview Text</button>
    </Fragment>
  );
};

ReactDOM.render(<Example />, document.body);

Props

Prop	Type	Description
field	String	Field that callback event.target.name will replace
html	String	Current html text value
classes	String	Class names for custom styles
saveCallback	Function	Save changes function. The Editor returns a event with the updated information
placeholder	String	Text editor custom placeholder

Requirements

The minimum supported version of React is v16.8.0. If you use an older version, upgrade React to use this library.