skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
97
comments
11%
passed
4
failed
26
coverage
58%

MaskedInput

grommet-controls
3.0.2

Component

browse
docs
issues
import { MaskedInput } from 'grommet-controls';

Main

browse
docs
issues
() => (
  <MaskedTestBed
    value="8024442131"
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
  />
)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
react
^17.0.1
ReactComponent
*
react-dom
^17.0.1
findDOMNode
*
text-mask-addons
^3.7.2
emailMaskcreateNumberMaskcreateAutoCorrectedDatePipe
text-mask-core
^5.0.1
createTextMaskInputElement

Internal dependencies

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

Component JSX

<DropInput
refvaluedefaultValueonInput
/>
DropInput
from"../DropInput"

Stories

A 11 Y Title

browse
docs
issues
() => (
  <MaskedTestBed
    a11yTitle="Dollars"
    mask={MaskedInput.createNumberMask({})}
    value="18933.85"
  />
)

Disabled

browse
docs
issues
() => <DateInput disabled={true} />

Drop Content

browse
docs
issues
() => <DateInput />

Widgets

browse
docs
issues
() => <NumberInput />

Plain

browse
docs
issues
() => (
  <MaskedTestBed
    value="8024442131"
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    plain={true}
  />
)

Focus Indicator

browse
docs
issues
() => (
  <MaskedTestBed
    value="8024442131"
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    plain={true}
    focusIndicator={true}
  />
)

Mask

browse
docs
issues
() => (
  <MaskedTestBed
    placeholder="US phone number with country code"
    mask={[
      '+',
      '1',
      ' ',
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
  />
)

Guide

browse
docs
issues
() => (
  <MaskedTestBed
    value="8024442131"
    guide={false}
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    plain={true}
    focusIndicator={true}
  />
)

Pipe

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      MaskedInput.alphabetic,
      MaskedInput.digit,
      MaskedInput.alphabetic,
      ' ',
      MaskedInput.digit,
      MaskedInput.alphabetic,
      MaskedInput.digit,
    ]}
    pipe={conformedValue => ({
      value: conformedValue.toUpperCase(),
    })}
    placeholder="K1A 0B2"
    placeholderChar={MaskedInput.placeholderChars.underscore}
  />
)

Placeholder Char

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    placeholderChar={MaskedInput.placeholderChars.underscore}
    value="8024442131"
  />
)

Keep Char Positions

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    keepCharPositions={true}
    value="8024442131"
  />
)

Show Mask

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    showMask={true}
    value="8024442131"
  />
)

Placeholder

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    placeholder="Enter phone..."
    value="8024442131"
  />
)

Name

browse
docs
issues
() => (
  <MaskedTestBed
    mask={[
      '(',
      /[1-9]/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ]}
    id="date-id"
    name="date-name"
    value="8024442131"
  />
)
Previous
input/EmailInput
Next
input/NumberInput