React Textarea With Editor Functionalities
Tags: react, tutorial, beginners, editor
Published: 2020-11-01 20:07:23

By default, ``textarea`` do not have editor functionalities like we have in Microsoft word and other editors out there. This means that the text we enter into an application database, may not be outputted the way we want it. 

However, sometimes it is important that our text maintain it's formatting in order for our message not to loose it's meaning or purpose. This is why I am introducing to you [React Draft Wysiwyg](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp). 

In this tutorial, I will be guiding you through a baby step to adding the beautiful editor functionality to your textarea.

## Starter Code
Please get the [starter code here](https://github.com/EBEREGIT/react-textarea-editor/tree/starter-code) if you will like to work along as I provide the guide.

After setting up the project in your machine, the browser output should be like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4h9k0yfj4q4rsmml5o4y.JPG)

## Let's Code
* Let's begin by installing the package Inside the project folder like so

```javascript

npm install --save react-draft-wysiwyg draft-js react-draft-wysiwyg-a

```

* Go to ``app.js`` file and import the following

```javascript

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

```

* Replace the ``textarea`` code with the following component

```javascript

<Editor />

```

* Your text area should now have the editor's tool bar like so:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/enrpxxonfje60oa56z5g.JPG)

And that is it!

You can now format the text you input as you want it to be displayed.

## Spicing Things Up
Notice that you can hardly say where to type in. This is because we have not styled it yet.

We can add styling the following ways

#### wrapperClassName="wrapper-class"
The class here is used to style both the toolbar and editor.

#### editorClassName="editor-class"
The class here is used to style the editor.

#### toolbarClassName="toolbar-class"
The class here is used to style the toolbar.

#### wrapperStyle={<wrapperStyleObject>}
This accommodates inline styles that affect both the toolbar and editor.

#### editorStyle={<editorStyleObject>}
This accommodates inline styles that affect the editor.

#### toolbarStyle={<toolbarStyleObject>}
This accommodates inline styles that affect the toolbar.

## Adding Styling
* Replace the ``<Editor />`` component with the following code

```javascript

   <Editor
     wrapperClassName="wrapper"
     editorClassName="editor"
     toolbarClassName="toolbar"
   />

```
* Add the following code to the ``App.css`` file

```css

.wrapper{
  border: 1px solid grey;
}

.editor{
  background-color: lavender;
}

```

Your page should now look like this

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wtz6hofm9302m099vdpv.JPG)

Congratulations for reaching this level!!!

### Conclusion
The importance of having a rich editor in our form cannot be overly emphasized. It helps in ensuring that we pass the right message.

We have seen how we can do it easily using the [React Draft Wysiwyg](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp) package. There are a lot you can do with it. Please explore more on their website and even checkout the [demo](https://jpuri.github.io/react-draft-wysiwyg/#/demo)

All Codes are [here](https://github.com/EBEREGIT/react-textarea-editor/tree/text-area-editor-tut)

Thank you for reading