Codes Tagged react

Hometagsreact

ReactJS Toggle a password with visibility

<h3>Password Toggle visibility using ReactJS</h3><pre class="ql-syntax" spellcheck="false">&lt;div class="root"&gt;&lt;div&gt; </pre><p><br></p><p>ReactJS part </p><pre class="ql-syntax" spellcheck="false">const Search=()=&gt;{ 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)=&gt;{ const value=e.target.value; setinputtext(value); if(value.length&gt;0){ setnone(false); } else{ setnone(true); } } const Eye=()=&gt;{ if(password=="password"){ setpassword("text"); seteye(false); } else{ setpassword("password"); seteye(true); } } return( &lt;&gt; &nbsp; &nbsp; &lt;div class="container"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="input_text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type={password} onChange={input} value={inputtext} required /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;i onClick={Eye} className={`fa ${eye ? "fa-eye-slash" : "fa-eye" } ${none ? "d-none" : "" }`}&gt;&lt;/i&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/&gt; ); } ReactDOM.render( &lt;Search /&gt;,document.getElementById("root")); </pre><p> </p>
sharereport
BBBootstrap Team9 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"; &nbsp; const [codeText,SetCodeText] = useState("copy"); &nbsp; const CopyCode = () =&gt;{ &nbsp; &nbsp; navigator.clipboard.writeText(maincode); &nbsp; &nbsp; SetCodeText("copied"); &nbsp; &nbsp; setTimeout(()=&gt;{ &nbsp; &nbsp; &nbsp; &nbsp; SetCodeText("copy"); &nbsp; &nbsp; &nbsp; &nbsp; },2000); &nbsp; } </pre>
sharereport
BBBootstrap Team8 months ago
Add a codeAdd Code
Remove adsremove

Latest codes

view all

Latest Snippets

view all