Sha256: 55c0e7e2ba42b71e3600f6482ffb91badfe6826499ffdf12a01ba18870f1e508
Contents?: true
Size: 1.59 KB
Versions: 31
Compression:
Stored size: 1.59 KB
Contents
import React, { useState } from 'react'
import { Passphrase } from '../../'
const PassphraseTips = (props) => {
const [input, setInput] = useState('')
const handleChange = (e) => setInput(e.target.value)
return (
<>
<div>
<Passphrase
label="Pass an array of strings to the tips prop"
onChange={handleChange}
tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']}
value={input}
{...props}
/>
<Passphrase
label="Omit the prop to hide the icon"
onChange={handleChange}
value={input}
{...props}
/>
<Passphrase
label="Only show tips at small screen size"
onChange={handleChange}
showTipsBelow="xs"
tips={['Make the password longer', 'Type more things', 'Use something else']}
value={input}
{...props}
/>
<Passphrase
label="Only show tips at medium screen size"
onChange={handleChange}
showTipsBelow="md"
tips={['Make the password longer', 'Type more things', 'Use something else']}
value={input}
{...props}
/>
<Passphrase
label="Only show tips at large screen size"
onChange={handleChange}
showTipsBelow="lg"
tips={['Make the password longer', 'Type more things', 'Use something else']}
value={input}
{...props}
/>
</div>
</>
)
}
export default PassphraseTips
Version data entries
31 entries across 31 versions & 1 rubygems