31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import { useCallback, useMemo, useState } from 'react'
|
|
import { IconButton } from '@mui/material'
|
|
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'
|
|
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
|
|
|
|
export const usePassword = () => {
|
|
const [isPasswordShown, setIsPasswordShown] = useState(false)
|
|
|
|
const handlePasswordTypeChange = useCallback(() => setIsPasswordShown((prevState) => !prevState), [])
|
|
|
|
const hidePassword = useCallback(() => setIsPasswordShown(false), [])
|
|
|
|
const inputProps = useMemo(
|
|
() => ({
|
|
endAdornment: (
|
|
<IconButton size="small" onClick={handlePasswordTypeChange}>
|
|
{isPasswordShown ? (
|
|
<VisibilityOffOutlinedIcon htmlColor="#6b6b6b" />
|
|
) : (
|
|
<VisibilityOutlinedIcon htmlColor="#6b6b6b" />
|
|
)}
|
|
</IconButton>
|
|
),
|
|
type: isPasswordShown ? 'text' : 'password',
|
|
}),
|
|
[handlePasswordTypeChange, isPasswordShown]
|
|
)
|
|
|
|
return { inputProps, hidePassword }
|
|
}
|