Custom loader on React JS

Create React App

1. Go to Terminal on your PC and apply this command ( Which is given on below ) to create a react app.

npx create-react-app custom-loader
cd custom-loader
npm start

Note : You can visit on my github profile my github profile App is available there.

2. This is the 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();

3. This is the App.js file.

import React from "react";
import "./App.css";
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
style={{
marginTop: ".8rem",
border: "1px solid grey",
borderRadius: "8px",
}}
>
<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) => (
<div
key={item}
className="color-boxes"
onClick={() => setIsSelected(item)}
style={{ backgroundColor: item }}
/>
))}
</div>
)}
</div>
</div>
);
}


Note : I have used React-bootstrap package for styling.


Bootstrap package installation

This command is used for installation of React-bootstrap

npm install react-bootstrap bootstrap

Finally run your app by using the below command

npm start

Output :



Contact us : harish.git2177@gmail.com

Thank you for visited us.

Comments

Post a Comment

Popular posts from this blog

handle dynamic input field

Image
Handle multiple and dynamic input fields We'll  learn here, How to create a Multiple   Input fields handler . Let's start, Note  :  You can clone this app from GitHub   click me to get link   1. We create a  React App . npx create-react-app multiple-input-fields cd multiple-input-fields 2. App.js file import React from "react" ; import Input from "./input" ; import "./App.css" ; export default function App () { const [ result , setResult ] = React . useState ( 0 ); const [ arr , setArr ] = React . useState ( 2 ); const [ inputData , setInputData ] = React . useState ({}); const NextField = () => { if ( arr < 10 ) { setArr ( arr + 1 ); } else { alert ( "Sorry, You have exceeded the limits of input fields           \n Not allowed more than 10 input fields" ); } }; const vals = Object . values ( inputData ); const handleClick = () => { ...
Read more

Custom React Text Editor

Image
 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 , s...
Read more