How to do it...

Let's say that your app has several screens that have password inputs. The users of your app like the ability to see passwords as they're typed. By default, values will be hidden, but if the input component itself had a button that toggles the visibility of the value, that would make your users happy.

Here's an example of a generic component that will adorn password fields with a visibility toggle button:

import React, { useState } from 'react';import TextField from '@material-ui/core/TextField';import IconButton from '@material-ui/core/IconButton';import InputAdornment from '@material-ui/core/InputAdornment';import VisibilityIcon from '@material-ui/icons/Visibility';import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.