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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.