@codifytools/react-text-editor NPM

React Text Editor

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

npm bundle size

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