PasswordRevealer

React, Components, Input, State

Renders a password input field with a reveal button.

  • Use the useState() hook to create the shown state variable and set its value to false.
  • When the <button> is clicked, execute setShown, toggling the type of the <input> between 'text' and 'password'.
const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? 'text' : 'password'} value={value} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>
    </>
  );
};
ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));

Recommended snippets

  • TagInput

    React, Components

    Renders a tag input field.

  • MultiselectCheckbox

    React, Components

    Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

  • LimitedWordTextarea

    React, Components

    Renders a textarea component with a word limit.