0.3.0 • Published 1 year ago

password-generator-by-lazez v0.3.0

Weekly downloads
-
License
-
Repository
github
Last release
1 year ago

A password generator React component

About

Simple component for React project. Keep the default theme or chose yours simply changing CSS.

Installation

You can install this component with npm or yarn:

npm i password-generator-by-lazez

or

yarn add password-generator-by-lazez

caution

You'll perhaps have to do npm start or yarn start again
so that it works in your project (it'll be opened in another port then)

NPM link

password generator by lazez on NPM

Use in your React project

Import the generator component into the file

import { Generator } from password-generator-by-lazez;

See how it works

exemple deployed

Screenshots

demo1

demo2

demo2

Example ( in a React project)

App.js

import "./App.css";
import { Generator } from "password-generator-by-lazez";

function App() {
  return (
    <div className="App">
      <Generator />
    </div>
  );
}

CSS

I use className for my CSS. If you want to set your own design the easiest way is to use the IDs which will have priority. Each element has same id and class (or almost)

ElementsClassNameid
All (div)containercontainer
div (contains h1)titletitle
form (choices, invite or error msg, submit and refresh btn)myFormmyForm
label (for chose length)lengthLabellengthLabel
input (to chose length)lengthInputlengthInput
fieldset ( contains checkbox for charts)fieldsetfieldset
fieldset legendfieldsetLegendfieldsetLegend
div (for uppercharts checkbox)fieldsetdivfieldsetDivUpper
uppercharts inputcheckboxmustHaveUpper
uppercharts labelchartLabelchartlabelUpper
div (for lowercharts checkbox)fieldsetdivfieldsetDivLower
lowercharts inputcheckboxmustHaveLower
lowercharts labelchartLabelchartlabelLower
div (for numbercharts checkbox)fieldsetdivfieldsetDivNumber
numbercharts inputcheckboxmustHaveNumber
numbercharts labelchartLabelchartlabelNumber
div (for othercharts checkbox)fieldsetdivfieldsetDivOther
othercharts inputcheckboxmustHaveOther
othercharts labelchartLabelchartlabelOther
div (invite msg)messagesmessages
p invite msginviteTxtinviteTxt
p invite msg newinviteTxtNewinviteTxtNew
p error msgerrorTxterrorTxt
div contains submit and refresh btninputsinputs
input submitsubmitsubmit
input type button to refreshrefreshrefresh
label (for output passwordReturned)passwordReturnedLabelpasswordReturnedLabel
div (contains message when generated)messageGeneratedmessageGenerated
p msg after generatemessageAftermessageAfter
span with chosen lengthchosenGeneratedchosenLengthGenerated
span with chosen chartschosenGeneratedchosenChartsGenerated
p message befor generatemessageBeforemessageBefore
input text(output of generate)passwordReturnedpasswordReturned
input button (copy)copycopy