In this article, a Random Name GeĀnerator will be created using React.js. Building a Random Name Generator means creating a program or application that generates random names, typically for various purposes like usernames, fictional characters, or data testing. It usually involves combining or selecting names from predefined lists or patterns.
Prerequisites
- Introduction to React
- React Components
- ReactJS Hooks
- NPM or NPX
Steps to Create a React Application
Create a react application by using this command
npx create-react-app random-name-generator
After creating your project folder, i.e. random-name-generator, use the following command to navigate to it:
cd random-name-generator
Project Structure
The package.json file will look like:
{
"name": "random-name-generator",
"version": "0.0.0",
"private": true,
"dependencies": {
"react": "18.2.0",
"react-dom": "18.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-scripts": "latest"
}
}
Approach / Functionalities
The provideĀd React.js code showcases a Random NameĀ Generator, allowing users to dynamically geĀnerate and manipulate nameĀs.
- Dynamic Name Generation: It allows users to generate and manipulate names using the generateRandomName function, which selects random first and last names from predefined lists.
- Copying Generated Names: Users can easily copy the generated name to the clipboard using the copyToClipboard function.
- Modifying Names: Users have the option to modify either the first or last name using the changeFirstName and changeLastName functions.
- Real-time Updates: The app uses Reactās useState for state management, ensuring real-time updates of the generated name as users interact with the interface.
- User-Friendly Interface: The user interface provides a seamless experience for generating, copying, and modifying names, enhancing user interaction.
Example: Write the below code in App.js file and style.css in the src directory
Javascript
// App.js import React, { useState } from 'react'; import './style.css'; Ā Ā const App = () => { Ā Ā Ā Ā Ā Ā // Generated name, copied status, andĀ Ā Ā Ā Ā // lists of first and last names mustĀ Ā Ā Ā Ā // all be stored in state variables. Ā Ā Ā Ā Ā Ā const [generatedFirstName, setGeneratedFirstName] = useState(''); Ā Ā Ā Ā const [generatedLastName, setGeneratedLastName] = useState(''); Ā Ā Ā Ā const [copied, setCopied] = useState(false); Ā Ā Ā Ā Ā Ā // Lists of Indian first names and last names Ā Ā Ā Ā const firstNames = [ Ā Ā Ā Ā Ā Ā Ā Ā 'Aarav', 'Aditi', 'Akshay', 'Amit', 'Ananya', Ā Ā Ā Ā Ā Ā Ā Ā 'Arjun', 'Avani', 'Bhavya', 'Chetan', 'Devi', Ā Ā Ā Ā Ā Ā Ā Ā 'Divya', 'Gaurav', 'Isha', 'Kiran', 'Manoj', Ā Ā Ā Ā Ā Ā Ā Ā 'Neha', 'Preeti', 'Rajesh', 'Riya', 'Shreya', Ā Ā Ā Ā Ā Ā Ā Ā 'Varun', 'Saurabh', 'Ajay', 'Sandip', 'Sadan', Ā Ā Ā Ā Ā Ā Ā Ā 'Jyoti', 'Sapna', 'Prem'Ā Ā Ā Ā ]; Ā Ā Ā Ā const lastNames = [ Ā Ā Ā Ā Ā Ā Ā Ā 'Agarwal', 'Bansal', 'Chopra', 'Gupta', 'Jain', Ā Ā Ā Ā Ā Ā Ā Ā 'Kapoor', 'Mehta', 'Patel', 'Rao', 'Sharma', Ā Ā Ā Ā Ā Ā Ā Ā 'Singh', 'Trivedi', 'Verma', 'Yadav'Ā Ā Ā Ā ]; Ā Ā Ā Ā Ā Ā //Ā To conjure up a name out of nowhere, use this function. Ā Ā Ā Ā Ā Ā const generate = () => { Ā Ā Ā Ā Ā Ā Ā Ā const randomFirstName = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā firstNames[Math.floor(Math.random() * firstNames.length)]; Ā Ā Ā Ā Ā Ā Ā Ā const randomLastName = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā lastNames[Math.floor(Math.random() * lastNames.length)]; Ā Ā Ā Ā Ā Ā Ā Ā setGeneratedFirstName(randomFirstName); Ā Ā Ā Ā Ā Ā Ā Ā setGeneratedLastName(randomLastName); Ā Ā Ā Ā Ā Ā Ā Ā setCopied(false); Ā Ā Ā Ā }; Ā Ā Ā Ā Ā Ā //Ā The name generated can be copied to theĀ Ā Ā Ā Ā // clipboard with this function. Ā Ā Ā Ā const copy = () => { Ā Ā Ā Ā Ā Ā Ā Ā const fullName = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā `${generatedFirstName} ${generatedLastName}`; Ā Ā Ā Ā Ā Ā Ā Ā const textField = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā document.createElement('textarea'); Ā Ā Ā Ā Ā Ā Ā Ā textField.innerText = fullName; Ā Ā Ā Ā Ā Ā Ā Ā document.body.appendChild(textField); Ā Ā Ā Ā Ā Ā Ā Ā textField.select(); Ā Ā Ā Ā Ā Ā Ā Ā document.execCommand('copy'); Ā Ā Ā Ā Ā Ā Ā Ā textField.remove(); Ā Ā Ā Ā Ā Ā Ā Ā setCopied(true); Ā Ā Ā Ā }; Ā Ā Ā Ā Ā Ā // Function to change the first name Ā Ā Ā Ā const changeFirstName = () => { Ā Ā Ā Ā Ā Ā Ā Ā const randomFirstName = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā firstNames[Math.floor(Math.random() * firstNames.length)]; Ā Ā Ā Ā Ā Ā Ā Ā setGeneratedFirstName(randomFirstName); Ā Ā Ā Ā Ā Ā Ā Ā setCopied(false); Ā Ā Ā Ā }; Ā Ā Ā Ā Ā Ā // Function to change the last name Ā Ā Ā Ā const changeLastName = () => { Ā Ā Ā Ā Ā Ā Ā Ā const randomLastName = Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā lastNames[Math.floor(Math.random() * lastNames.length)]; Ā Ā Ā Ā Ā Ā Ā Ā setGeneratedLastName(randomLastName); Ā Ā Ā Ā Ā Ā Ā Ā setCopied(false); Ā Ā Ā Ā }; Ā Ā Ā Ā Ā Ā return ( Ā Ā Ā Ā Ā Ā Ā Ā <div className="name-generator-container"> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <h1> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Random Indian Name Generator Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </h1> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <div className="buttons-container"> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <button className="generate-button"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā onClick={generate}> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Generate Name Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </button> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <button className="copy-button"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā onClick={copy}> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Copy Name Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </button> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </div> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā {copied && <p className="copy-success"> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Name Copied to Clipboard! Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </p>} Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <p className="generated-name"> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Generated Name: Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā {`${generatedFirstName} ${generatedLastName}`} Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </p> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <div className="buttons-container"> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <button className="change-button"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā onClick={changeFirstName}> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Change First Name Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </button> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā <button className="change-button"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā onClick={changeLastName}> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Change Last Name Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </button> Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā </div> Ā Ā Ā Ā Ā Ā Ā Ā </div> Ā Ā Ā Ā ); }; Ā Ā export default App; |
Javascript
// index.js Ā Ā import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; Ā Ā import App from './App'; Ā Ā const root = createRoot(document.getElementById('app')); Ā Ā root.render( Ā Ā Ā Ā <StrictMode> Ā Ā Ā Ā Ā Ā Ā Ā <App /> Ā Ā Ā Ā </StrictMode> ); |
CSS
/* style.css */Ā Ā .name-generator-container { Ā Ā Ā Ā text-align: center; Ā Ā Ā Ā margin: 20px auto; Ā Ā Ā Ā padding: 40px; Ā Ā Ā Ā border: 2px solid #3498db; Ā Ā Ā Ā border-radius: 10px; Ā Ā Ā Ā background-color: #f0f0f0; Ā Ā Ā Ā max-width: 600px; Ā Ā Ā Ā box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); Ā Ā Ā Ā transition: box-shadow 0.3s ease-in-out; } Ā Ā .name-generator-container:hover { Ā Ā Ā Ā box-shadow: 10px 10px 50px 10px grey; } Ā Ā h1 { Ā Ā Ā Ā font-size: 24px; Ā Ā Ā Ā color: #333; Ā Ā Ā Ā margin-bottom: 20px; } Ā Ā .buttons-container { Ā Ā Ā Ā display: flex; Ā Ā Ā Ā justify-content: space-between; Ā Ā Ā Ā margin: 20px 0; } Ā Ā .generate-button, .copy-button, .change-button { Ā Ā Ā Ā padding: 15px; Ā Ā Ā Ā font-size: 16px; Ā Ā Ā Ā border: none; Ā Ā Ā Ā border-radius: 10px; Ā Ā Ā Ā cursor: pointer; } Ā Ā .generate-button:hover, .copy-button:hover, .change-button:hover { Ā Ā Ā Ā box-shadow: 0px 0px 15px 2px grey; Ā Ā Ā Ā transition: all ease-in-out 0.5s; } Ā Ā .generate-button { Ā Ā Ā Ā background: green; Ā Ā Ā Ā color: white; } Ā Ā .copy-button { Ā Ā Ā Ā color: white; Ā Ā Ā Ā background: crimson; } Ā Ā .change-button { Ā Ā Ā Ā background-color: #2980b9; Ā Ā Ā Ā color: white; } Ā Ā .generated-name { Ā Ā Ā Ā font-size: 22px; Ā Ā Ā Ā margin: 20px 0; Ā Ā Ā Ā font-weight: bold; Ā Ā Ā Ā font-family: 'Courier New', Courier, monospace; } Ā Ā .copy-success { Ā Ā Ā Ā color: #27ae60; } Ā Ā .center-buttons { Ā Ā Ā Ā display: flex; Ā Ā Ā Ā justify-content: center; } Ā Ā @media (max-width: 768px) { Ā Ā Ā Ā .name-generator-container { Ā Ā Ā Ā Ā Ā Ā Ā max-width: 90%; Ā Ā Ā Ā } } Ā Ā /* Animation on copy button click */@keyframes copySuccessAnimation { Ā Ā Ā Ā 0% { Ā Ā Ā Ā Ā Ā Ā Ā transform: translateY(-10px); Ā Ā Ā Ā Ā Ā Ā Ā opacity: 0; Ā Ā Ā Ā } Ā Ā Ā Ā Ā Ā 100% { Ā Ā Ā Ā Ā Ā Ā Ā transform: translateY(0); Ā Ā Ā Ā Ā Ā Ā Ā opacity: 1; Ā Ā Ā Ā } } Ā Ā .copy-success-animation { Ā Ā Ā Ā animation: copySuccessAnimation 0.5s ease-in-out; } |
Steps to run the Application: Type the following command in the terminal:
npm start
Type the following URL in the browser:
http://localhost:3000/
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
