1.8.0 • Published 8 months ago
@s-ui/react-molecule-validation-code v1.8.0
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.