Example Show/Hide PasswordWidget for mui

[calebstott]

Thought this might be handy for anyone else needing to implement the same functionality

import InputAdornment from '@mui/material/InputAdornment';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';

import { Templates } from '@rjsf/mui';
const { BaseInputTemplate } = Templates;

const CustomPassword = (props) => {
    // get your custom props from where you need to
    const [showPassword, setShowPassword] = useState(false);
    return <BaseInputTemplate
        {...props}
        type={showPassword ? 'text' : 'password'}
        InputProps={{
            endAdornment:
                <InputAdornment position="end">
                    <IconButton
                        aria-label="toggle password visibility"
                        onClick={() => setShowPassword((show) => !show)}
                        edge="end"
                    >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                </InputAdornment>
        }}
    />;
}

const widgets = {
    PasswordWidget: CustomPassword
};

<Form widgets={widgets} ... />

[AbdullahElrubi]

Thanks for this, you spared me hours of searching.