https://github.com/codifytools/react-text-editor
A small, simple and customizable text editor for React applications.
https://github.com/codifytools/react-text-editor
editor react text
Last synced: about 1 month ago
JSON representation
A small, simple and customizable text editor for React applications.
- Host: GitHub
- URL: https://github.com/codifytools/react-text-editor
- Owner: codifytools
- License: mit
- Created: 2021-04-22T16:45:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-31T15:22:07.000Z (about 4 years ago)
- Last Synced: 2025-08-25T09:44:37.050Z (10 months ago)
- Topics: editor, react, text
- Language: JavaScript
- Homepage:
- Size: 793 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Text Editor
A small, simple and customizable text editor for React applications.
[](https://www.npmjs.com/package/@codifytools/react-text-editor)
[](https://github.com/facebook/react/blob/master/LICENSE)
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Props](#props)
* [Requirements](#requirements)
* [Contributing](#contributing)
## Installation
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
```sh
npm install @codifytools/react-text-editor
```
## Usage
```jsx
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: '
Editor example text
' });
const handleChange = (event) => {
const { name, value } = event.target;
setValues({ ...values, [name]: value });
}
return (
console.log(values.text)}>Preview Text
);
};
ReactDOM.render(, 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.