@codifytools/react-text-editor

1.0.6 • Public • Published

React Text Editor

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

npm bundle size npm bundle size npm downloads GitHub license

Table of Contents

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.

/@codifytools/react-text-editor/

    Package Sidebar

    Install

    npm i @codifytools/react-text-editor

    Weekly Downloads

    3

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • juanpmd