Text Converter App Using React
Last Updated : 06 Aug, 2024
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.
Application Dark ModeFeatures 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:
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; // 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' } }> <h1>{props.heading}</h1> <div className="mb-3"> <textarea className="form-control" value={word} onChange={ManageOnChange} style={ { backgroundColor: props.mode === 'dark' ? '#313142' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }} id="myBox" rows="8"></textarea> </div> <button disabled={word.length === 0} className="btn btn-danger mx-2 my=1" onClick={ManageUpClick}> UPPER CASE </button> <button disabled={word.length === 0} className="btn btn-dark mx-2 my=1" onClick={ManageLoClick}> lower case </button> <button disabled={word.length === 0} className="btn btn-success mx-2 my=1" onClick={ManageAllClick}> Clear All </button> <button disabled={word.length === 0} className="btn btn-primary mx-2 my=1" onClick={ManageAllCopy}> Copy to clipboard </button> <button disabled={word.length === 0} className="btn btn-warning mx-2 my=1" onClick={ManageAllSpace}> Clear Space </button> <button disabled={word.length === 0} className="btn btn-info mx-2 my=1" onClick={ManageReverseWord}> Reverse Word </button> <button disabled={word.length === 0} className="btn btn-primary mx-2 my=1" onClick={ManageReverseSentence}> Reverse Sentence </button> </div> <div className="container my-3" style= { { color: props.mode === 'dark' ? 'white' : 'black' }}> <h2>Word Summary</h2> <p> { word.split(" ").filter( (element) => { return element.length !== 0 }) .length } words and {word.length} character </p> <p> { 0.008 * word.split(" ") .filter( (element) => { return element.length !== 0 } ).length } Minutes read </p> <h2>Preview</h2> <p> { word.length > 0 ? word : "Enter the word to Preview" } </p> </div> </> ); } // 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"> <strong> { capital(props.attension.type) } </strong> :{props.attension.msg} </div>} </div> ) } export default Alert // 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}` }> <div className="container-fluid"> <a className="navbar-brand" href="/">{props.title}</a> <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"> </span> </button> <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav me-auto mb-2 mb-lg-0"> <li className="nav-item"> <a className="nav-link active" aria-current="page" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"></a> </li> </ul> {/* <!--Dark Mode button functionality--> */} <div className= { `form-check form-switch text-${props.mode === 'light' ? 'dark' : 'light'}` }> <input className="form-check-input" type="checkbox" onClick={props.toggleMode} role="switch" id="flexSwitchCheckDefault" /> <label className="form-check-label" htmlFor="flexSwitchCheckDefault"> Dark Mode </label> </div> </div> </div> </nav> ); } Navbar.prototypes = { title: PropTypes.string.isRequired, } Navbar.defaultProps = { title: "Set title here", } Steps to run the application:
npm start
Output:
Similar Reads
News App using React
News App using React JS uses React's basic principles to fetch the latest news from a News API and show them to users based on their interests. It's a simple project to create an interactive and personalized news-viewing experience. Preview of final output: Let us have a look at how the final output
4 min read
Create a Text Editor App using React-Native
In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor." Preview of final output: Let us have a look at
3 min read
Create a Text Narrator App using React-Native
In this project, we'll develop a Text Narrator application using React Native. The Text Narrator app is a valuable tool for improving accessibility. It allows users to input text, and the app will convert that text into audible speech. This can be incredibly helpful for individuals with visual impai
2 min read
Word and Letter Counter using React
The word and letter counter is an application that counts the number of letters and words entered in text and give the number (count) of each in output. Each element present in the text will be considered a letter, and a group of letters with a space will be considered a word. Using this approach, w
3 min read
Shopping Cart app using React
In this article, we will create an Interactive and Responsive Shopping Cart Project Application using the famous JavaScript FrontEnd library ReactJS. We have named or Application as "GeeksforGeeks Shopping Cart". The application or project which we have developed mainly focuses on the functional com
9 min read
Number Format Converter using React
In this article, we will create Number Format Converter, that provides various features for users like to conversion between decimal, binary, octal and hexadecimal representations. Using functional components and state management, this program enables users to input a number and perform a range of c
7 min read
Clipboard App using React-Native
In this tutorial, we will create a stylish clipboard app using React Native. The app allows users to copy text to the clipboard, paste text from the clipboard, and display a stylish popup message to indicate successful copy or paste actions. Preview of final output: Let us have a look at how the fin
3 min read
Create an Image to Text App using React-Native
In this article, we are going to build a step-by-step Image to Text app using React-Native. This application will allow users to extract the text from the image using OCR (Optical Character Recognition) and later copy it to the clipboard or share it with others. This application is a perfect usage o
4 min read
Emoji Picker App using React
In this article, we will create an Interactive Emoji Application using ReactJS Framework. This developed project basically implements functional components and manages the state accordingly. The developed Application allows users to explore a wide range of emojis and select them for their communicat
4 min read
Crowdfunding App using React
In this article, we will create a Crowdfunding App using React. The React crowdfunding app features multiple projects, each with a set fundraising goal. Users can contribute by entering donation amounts, and the app dynamically tracks progress toward each goal. Preview of final output: Let us have a
5 min read