Custom React Text Editor

 Custom React Text Editor 

We'll  learn here, How to create a Custom Text Editor on React JS.

Let's start,

Note : You can clone this app from GitHub click me to get link 

1. We create a React App.

run:

npx create-react-app custom-text-editor

cd custom-text-editor

2. App.js file

import React from "react";

import "bootstrap/dist/css/bootstrap.min.css";

import { BsTextCenter, BsTextRight, BsTextLeft } from "react-icons/bs";

import { IoIosColorPalette } from "react-icons/io";

import { Arr } from "./constants/colors";

import { fontSize } from "./constants/font-sizes";

import { fontWeight } from "./constants/font-Weights";

export default function App() {

const [isSelected, setIsSelected] = React.useState("");

const [fontSizes, setFontSizes] = React.useState(11);

const [fontWeights, setFontWeights] = React.useState(400);

const [active, setActive] = React.useState(false);

const [textAlignment, setTextAlignment] = React.useState("start");

const handleReset = () => {

setFontSizes(11);

setFontWeights(400);

setIsSelected("#000");

setTextAlignment("start");

};

return (

<div className="main-div">

<div className="width">

<div className="align-selected-box"></div>

<div style={{ border: "1px solid grey" }}>

<div className="d-flex justify-content-end p-1">

<div className="text-align-box">

<select

onChange={(e) => setFontSizes(e.target.value)}

value={fontSizes}

>

{fontSize.map((item) => (

<option key={item}>{item}</option>

))}

</select>

</div>

<div className="text-align-box mx-1">

<select

onChange={(e) => setFontWeights(e.target.value)}

value={fontWeights}

>

{fontWeight.map((item) => (

<option key={item}>{item}</option>

))}

</select>

</div>

<div

className="text-align-box me-1"

onClick={() => setActive(!active)}

>

<IoIosColorPalette className={active ? "text-danger" : ""} />

</div>

<div

className="text-align-box"

onClick={() => setTextAlignment("start")}

>

<BsTextLeft />

</div>

<div

className="text-align-box mx-1"

onClick={() => setTextAlignment("center")}

>

<BsTextCenter />

</div>

<div

className="text-align-box"

onClick={() => setTextAlignment("end")}

>

<BsTextRight />

</div>

</div>

<textarea

style={{

color: isSelected,

fontSize: fontSizes + "px",

fontWeight: fontWeights,

textAlign: textAlignment,

}}

/>

</div>

<div className="align-input-field"></div>

<div className="pb-2 d-flex justify-content-evenly">

<button onClick={handleReset} className="bg-danger">

reset

</button>

</div>

{active && (

<div className="align-color-boxes">

{Arr.map((item, i) => (

<div

key={item}

className="color-boxes"

onClick={() => setIsSelected(item)}

style={{ backgroundColor: item }}

/>

))}

</div>

)}

</div>

</div>

);

}

3. App.css file

.selected-color {

height: 3rem;

width: 3rem;

border: 1px solid grey;

border-radius: 50%;

}

.color-boxes {

height: 1rem;

width: 1rem;

border-radius: 50%;

cursor: pointer;

}

.width {

min-width: 320px;

}

textarea {

width: 100%;

font-size: 11px;

border: 0;

padding: 4px 6px;

}

textarea:focus {

outline: none;

}

.align-selected-box {

display: flex;

justify-content: center;

padding: 0.6rem 0;

}

.align-color-boxes {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 10px;

width: 320px;

}

.main-div {

display: flex;

justify-content: center;

}

input {

border: 1px solid grey;

border-radius: 4px;

font-size: 0.8rem !important;

padding: 2px 6px;

}

input:focus {

outline: none;

border: 1px solid green;

}

.align-input-field {

display: flex;

justify-content: space-evenly;

padding: 0.5rem 0;

}

button {

border: 0;

color: white;

background-color: green;

border-radius: 6px !important;

}

.select-tag {

width: 150px;

}

.text-align-box {

border: 1px solid rgb(147, 144, 144);

border-radius: 6px;

padding: 0 6px;

cursor: pointer;

}

select {

border: 0;

background: none;

}

select:focus {

outline: none;

}

4. Constants, this is a folder it contains three files such as colors.js, font-size.js and font-weight.js

5. color.js file

export const Arr = [

"#F44336",

"#FFEBEE",

"#FFCDD2",

"#EF9A9A",

"#E57373",

"#EF5350",

"#F44336",

"#E53935",

"#D32F2F",

"#C62828",

"#B71C1C",

"#EEEEEE",

"#E0E0E0",

"#BDBDBD",

"#9E9E9E",

"#757575",

"#616161",

"#424242",

"#212121",

"#607D8B",

"#ECEFF1",

"#CFD8DC",

"#B0BEC5",

"#90A4AE",

"#78909C",

"#607D8B",

"#546E7A",

"#455A64",

"#37474F",

"#263238",

"#000000",

"#FFFFFF",

];

6. font-size.js file

export const fontSize = [

9, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80,

];

7. font-wieght.js file

export const fontSize = [

9, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80,

];

8. index.js file

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

reportWebVitals();

Run Code

npm start

Output :

Contact us : harish.git2177@gmail.com

GitHub : harishgit01

git clone : https://github.com/harishgit01/custom-react-text-editor