Try out:
Upgrade - GO PRO
Tools
Online Editor
Color Pallettes
Gradient Colors
Glassmorphism Generator
Box Shadow Generator
Quizes
Codes
Mcqs
Login
Register
Start Coding
Codes Tagged react
Home
tags
react
ReactJS Toggle a password with visibility
<h3>Password Toggle visibility using ReactJS</h3><pre class="ql-syntax" spellcheck="false"><div class="root"><div> </pre><p><br></p><p>ReactJS part </p><pre class="ql-syntax" spellcheck="false">const Search=()=>{ const{useState}=React; const[eye,seteye]=useState(true); const[none,setnone]=useState(true); const[inputtext,setinputtext]=useState(""); const[password,setpassword]=useState("password"); const input=(e)=>{ const value=e.target.value; setinputtext(value); if(value.length>0){ setnone(false); } else{ setnone(true); } } const Eye=()=>{ if(password=="password"){ setpassword("text"); seteye(false); } else{ setpassword("password"); seteye(true); } } return( <> <div class="container"> <div class="input_text"> <input type={password} onChange={input} value={inputtext} required /> <span></span> <i onClick={Eye} className={`fa ${eye ? "fa-eye-slash" : "fa-eye" } ${none ? "d-none" : "" }`}></i> </div> </div> </> ); } ReactDOM.render( <Search />,document.getElementById("root")); </pre><p> </p>
share
report
BBBootstrap Team
9 months ago
copy to clipboard in react.js
<p>copy to clipboard items using react useState Hook with the following code </p><p><br></p><pre class="ql-syntax" spellcheck="false"> var maincode = "Text to be copied"; const [codeText,SetCodeText] = useState("copy"); const CopyCode = () =>{ navigator.clipboard.writeText(maincode); SetCodeText("copied"); setTimeout(()=>{ SetCodeText("copy"); },2000); } </pre>
share
report
BBBootstrap Team
8 months ago
1
Add a code
Add Code
Remove ads
remove
Latest codes
view all
Latest Snippets
view all