A pack of extensions for grommet 2
created:4/8/2021
updated:4/8/2021
source lines:97
comments %:11

MaskedInput

grommet-controls
3.0.1

A masked Input control with an optional drop button with the specified dropContent.

import { MaskedInput } from 'grommet-controls';

Main

Name
Description
Default
IMaskedInputOwnProps (7 properties)
mask

An array or a function that defines how the user input is going to be masked

MaskType
-
guide

When masked, a boolean that tells the component whether to be in guide or no guide mode

boolean
true
pipe

When masked, a function that will give you the opportunity to modify the conformed value before it is displayed on the screen

PipeType
-
placeholderChar

When masked, represents the fillable spot in the mask

string
keepCharPositions

For masked. When true, adding or deleting characters will not affect the positions of existing characters. When false, adding characters causes existing characters to advance. And deleting characters causes existing characters to move back

boolean
-
showMask

When masked, displays the mask as a placeholder in place of the regular placeholder

boolean
false
emptyValue

string to show when value is empty

string
-
IDropInputOwnProps (14 properties)
TextInputProps (19 properties)
ClassAttributes (1 properties)
Attributes (1 properties)
InputHTMLAttributes (28 properties)
HTMLAttributes (41 properties)
AriaAttributes (48 properties)
DOMAttributes (157 properties)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

update stories titles and navigation
8/30/2020

atanasster

update eslint and add component-controls
8/27/2019

atanasster

initial commit 2.x alpha
3 commits

package
imports
peer
react
^17.0.1
ReactComponent
*
react-dom
^17.0.1
findDOMNode
*
emailMaskcreateNumberMaskcreateAutoCorrectedDatePipe
createTextMaskInputElement

file
imports
"../DropInput"
DropInput
"./utils"
transformMaskedValue
"./minMaxNumberPipe"
createMinMaxInputPipemaskedNumberValue
"./MaskedInputProps"
IMaskedInputProps

Stories

A 11 Y Title

Disabled

Drop Content

Widgets

Plain

Focus Indicator

Mask

Guide

Pipe

Placeholder Char

Keep Char Positions

Show Mask

Placeholder

Name