Open In App

Text Converter App Using React

Last Updated : 06 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

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.

 npx  create-react-app  TextConverter

Step 2: Navigate to the folder using the command

cd  TextConverter

Step 3: 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": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

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';

function App() {
    // < !--Using the React hook for 
    // the dark Mode functionality-- >
    const [mode, setMode] = useState('light');
    const [attension, setAttension] = useState(null)
    const showAlert =
        (message, type) => {
            setAttension({
                msg: message,
                type: type
            });
            setTimeout(() => {
                setAttension(null);
            }, 2000);
        }

    //   < !--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 JavaScript JavaScript

Steps to run the application:

npm  start

Output:


Next Article

Similar Reads

three90RightbarBannerImg