Easy-react-editor NPM

EasyReactEditor is a simple and customizable React component for building rich-text editors in your web applications. It provides a straightforward way to integrate a WYSIWYG editor into your project, enabling users to create and edit content with ease.

Installation

You can install EasyReactEditor via npm:

npm install easy-react-editor

Or using Yarn:

yarn add easy-react-editor

Usage

Here's a basic example of how to use EasyReactEditor in your React application:

import React, { useState } from 'react';
import EasyReactEditor from 'easy-react-editor';

function App() {
  const [editorContent, setEditorContent] = useState('');

  return (
    <div className='App'>
      <EasyReactEditor text={editorContent} setText={setEditorContent} />
    </div>
  );
}

export default App;

Props

text (required) - Default text for editing, use the first return parameter useState().
setText (required) - Use the second return parameter useState().
placeholder (optional) - Represents the placeholder text for the input field. Default: 'Type text here...',
tools (optional) - Allows you to customize the available formatting tools in the editor's toolbar. Default: ['Undo', 'Redo', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'UL', 'OL', 'HR'].

<EasyReactEditor
  text={editorContent}
  setText={setEditorContent}
  placeholder='Start typing your content here...'
  tools={['Undo', 'Redo', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'UL', 'OL', 'HR']}
/>

Customizing CSS

EasyReactEditor allows you to customize the CSS styles for various parts of the editor to match the look and feel of your application. You can target the following CSS classes and IDs:

#ereditor: The wrapper element for the editor.
#ereditor .ere-content: The editing field where users enter and format text.
#ere-toolbar: The toolbar that contains the formatting options.
#ere-toolbar .ere-tool: Individual tool elements within the toolbar.

Contributing

Thank you for considering contributing to EasyReactEditor! Your contributions help make this project better for everyone.

Issues

If you find a bug, have a suggestion, or want to request a new feature, please open an issue on the GitHub repository to discuss it.

Pull Requests

If you'd like to contribute code to EasyReactEditor, please follow these steps:

Fork the EasyReactEditor repository on GitHub.
Clone your forked repository to your local machine.
Create a new branch for your changes.
Make your changes, add tests if applicable, and ensure the existing tests pass.
Commit your changes and push your changes.
Open a pull request on the EasyReactEditor repository and describe your changes and improvements. Your pull request will be reviewed, and once approved, it will be merged into the project!