Text Converter App Using React (original) (raw)

Last Updated : 17 Jul, 2025

Text Converter application using React JS uses class components to create the application and Our focus will extend beyond mere functionality, as we'll enhance the user interface using a combination of custom and bootstrap styling. In this application user types the text in the block and converts the text according to the user's need.

**Output Preview: Let us have a look at how the final output will look like.

dark

Application Dark Mode

**Features of Text Converter App:

Converted text to Upper Case.
Converted text to lowercase.
Clear Text
Copy to Clipboard
Clear Space
Reverse the Sentence/word

**Steps to create the Text Converter App:

**Step 1: Create the project file using command.

npm create vite@latest TextConverter --template react

**Step 2: Navigate to the folder using the command

cd TextConverter

**Step 3: Install required dependencies

Install the required dependencies using npm or yarn. For this tutorial, we’ll use npm:

npm install

**Step 4: Create a folder named components in src file and create new files Nabvar.js, Alert.js, and TextForm.js

**Project Structure:

newD

The updated dependencies in package.json file will look like:

"dependencies": {
"bootstrap": "^5.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
"vite": "^4.0.0"
}

**Approach to create Text Converter App:

**App.js: This is our main file where all the logic for a text utility tool with a toggleable light/dark mode. The main functionality is contained within the toggleMode function, and the state of the application (mode and alerts) is managed using React's useState hook.
**Navbar.js: The Navbar component creates a Bootstrap navigation bar with dynamic styling based on the mode passed as a prop. It also includes a dark mode switch and enforces props types for the title. If no title is provided, a default title is set.
**Alert.js: The Alert component renders a dynamic alert message based on the type and message received as props. The alert type is capitalized using the capital helper function, and the alert is displayed with dynamic styling based on its type. The component also has a fixed height of 30 pixels.
**TextForm.js: The TextForm component provides a user interface for text manipulation, allowing users to convert text case, clear, copy, reverse words or sentences, and view a summary and preview of the entered text. The component maintains the state of the entered text using the useState hook.

**Example: Below is the code example for the above explained approach:

JavaScript `

// App.js

import './App.css'; import Navbar from './Components/Navbar'; import TextForm from './Components/TextForm'; import React, { useState } from 'react' import Alert from './Components/Alert';

//   < !--Enable the dark mode-- >
const toggleMode = () => {
    if (mode === 'light') {
        setMode('dark');
        document.body
            .style.backgroundColor = 
                'rgb(110 118 131)';
        showAlert("Dark Mode", "success");
    } else {
        setMode('light')
        document.body
            .style.backgroundColor = 'white';
        showAlert("Light Mode", "success");
    }
}
return (
    <>
        <Navbar title="TextConverter"
            mode={mode}
            toggleMode={toggleMode} />
        <Alert attension={attension} />
        <div className="container my-3">
            {
                <TextForm showAlert={showAlert}
                    heading="Enter the text to analyze below"
                    mode={mode} />
            }
        </div>
    </>
);

} export default App;

JavaScript

// TextForm.js

import React, { useState } from 'react'

export default function TextForm(props) { const ManageUpClick = () => { let newElement = word.toUpperCase(); setWord(newElement); props.showAlert( "Converted to UpperCase", "success" ); } const ManageLoClick = () => { let newElement = word.toLowerCase(); setWord(newElement); props.showAlert( "Converted to LowerCase", "success" ); } const ManageAllClick = () => { let newElement = ''; setWord(newElement); props.showAlert( "Cleared word", "success" ); } const ManageAllCopy = () => { var word = document.getElementById("myBox"); word.select(); navigator.clipboard .writeText(word.value); props.showAlert("All Copied", "success"); } const ManageAllSpace = () => { let newElement = word.split(/[ ]+/); setWord(newElement.join(" ")); props.showAlert( "Cleared Space", "success" ); } const ManageReverseWord = () => { const reversedWords = word.split(' ') .map( word => word.split('') .reverse() .join('')).join(' '); setWord(reversedWords); props.showAlert( "Reverse word", "success" ); } const ManageReverseSentence = () => { const reversedSentence = word.split(' ') .reverse().join(' '); setWord(reversedSentence); props.showAlert( "Reverse Sentence", "success" ); } const ManageOnChange = (events) => { console.log("On Change"); setWord(events.target.value); } const [word, setWord] = useState(''); return ( <> <div className="container" style= { { color: props.mode === 'dark' ? 'white' : 'black' } }>

{props.heading}

<button disabled={word.length === 0} className="btn btn-danger mx-2 my=1" onClick={ManageUpClick}> UPPER CASE <button disabled={word.length === 0} className="btn btn-dark mx-2 my=1" onClick={ManageLoClick}> lower case <button disabled={word.length === 0} className="btn btn-success mx-2 my=1" onClick={ManageAllClick}> Clear All <button disabled={word.length === 0} className="btn btn-primary mx-2 my=1" onClick={ManageAllCopy}> Copy to clipboard <button disabled={word.length === 0} className="btn btn-warning mx-2 my=1" onClick={ManageAllSpace}> Clear Space <button disabled={word.length === 0} className="btn btn-info mx-2 my=1" onClick={ManageReverseWord}> Reverse Word <button disabled={word.length === 0} className="btn btn-primary mx-2 my=1" onClick={ManageReverseSentence}> Reverse Sentence <div className="container my-3" style= { { color: props.mode === 'dark' ? 'white' : 'black' }}>

Word Summary

{ word.split(" ").filter( (element) => { return element.length !== 0 }) .length } words and {word.length} character

{ 0.008 * word.split(" ") .filter( (element) => { return element.length !== 0 } ).length } Minutes read

Preview

{ word.length > 0 ? word : "Enter the word to Preview" }

</> ); }

` JavaScript ``

// Alert.js

import React from 'react' function Alert(props) { const capital = (text) => { const lower = text.toLowerCase(); return lower.charAt(0) .toUpperCase() + text.slice(1); } return ( <div style= { { height: '30px' } }> { props.attension && <div className= { alert alert-${props.attension.type} alert-dismissible fade show } role="alert"> { capital(props.attension.type) } :{props.attension.msg} } ) } export default Alert

JavaScript

// Navbar.js

import React from 'react'; import PropTypes from 'prop-types'

export default function Navbar(props) { return ( <nav className={ navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode} }>

{props.title}

Home

{/* */} <div className= {

form-check form-switch                              text-${props.mode === 'light'                                 ? 'dark' : 'light'}

}> Dark Mode

); } Navbar.prototypes = { title: PropTypes.string.isRequired, }

Navbar.defaultProps = { title: "Set title here", }

**Steps to run the application:

npm run dev

**Output: