Author: Nicola De Nicolais
This code represents a Password Generator created with React with the addition of React Router.
React.js is a JavaScript library for creating user interfaces specific to single-page applications. It allows developers to create large web applications that can modify data without having to reload the page every time.
React Router is a complete JavaScript routing library that allows you to manage paths within a web application using so-called dynamic routing. It allows navigation between sections of various components in React applications and allows you to change the URL of the browser while keeping the user interface synchronized with the URL.
npm install react-router-dom
yarn add react-router-dom
React-Toastify allows you to add notifications to your app in an easy way.
npm install --save react-toastify
yarn add react-toastify
Font Awesome is the Internet's icon library and toolkit.
npm install --save font-awesome
yarn add font-awesome
- Clone this repository from GitHub
git clone https://github.com/ndenicolais/react-password-generator
- Change the working directory
cd react-password-generator-main
- Install dependencies
npm install
yarn
- Run the application in developer mode
npm start
yarn start
- Open http://localhost:3000 to view the application in the browser
Customize the aspect of React-toastify according to your preferences by editing these parameters:
📄 App.js file in 📂 src
| Parameter | Description |
|---|---|
| position | position of the toast |
| autoClose | delay in ms to close the toast. If set to false the notification needs to be closed manually |
| hideProgressBar | display or not the progress bar below the toast(remaining time) |
| newsOnTop | display newest toast on top |
| closeOnClick | dismiss toast on click |
| pauseOnHover | keep the timer running or not on hover |
| draggable | allow toast to be draggable |
| progress | show a progress bar |
In this list there are only the parameters that i've used in the code.
For all parameters see React-toastify's documentation.