@s-ui/react-molecule-validation-code
v1.8.0
Published
> MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.
Downloads
4,431
Maintainers
Keywords
Readme
MoleculeValidationCode
MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.
Installation
$ npm install @s-ui/react-molecule-validation-code
Usage
Basic usage
import MoleculeValidationCode from '@s-ui/react-molecule-validation-code'
return (
<MoleculeValidationCode
sendButtonTextLabel="Send"
deleteButtonTextLabel="Delete"
labelText="Your verification code"
resendButtonTextLabel="Resend"
onChange={onChangeHandler}
/>
)
Import the styles (Sass)
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-validation-code/lib/index';
Placeholder usage
<MoleculeValidationCode
placeholder="A"
onChange={onChangeHandler}
defaultValue={code}
/>
Password filter usage
<MoleculeValidationCode
isPassword
onChange={onChangeHandler}
defaultValue={code}
/>
Sizes usage
<MoleculeValidationCode
size="medium"
onChange={onChangeHandler}
defaultValue={code}
/>
Length usage
<MoleculeValidationCode
lenth={6}
onChange={onChangeHandler}
defaultValue={code}
/>
Mask usage
<MoleculeValidationCode
mask="NUMBER"
onChange={onChangeHandler}
defaultValue={code}
/>
Disabled usage
<MoleculeValidationCode
disabled
onChange={onChangeHandler}
defaultValue={code}
/>
Status usage
<MoleculeValidationCode
status="error"
onChange={onChangeHandler}
defaultValue={code}
/>
Children usage
<MoleculeValidationCode onChange={onChangeHandler} defaultValue={code}>
-
</MoleculeValidationCode>
Find full description and more examples in the demo page.