Top
MaskedInput API - API
MaskedInput API
Props (9)
Callback Props (3)
Styling Props (4)
Methods (4)
Number|String
default: undefined
Specifies a default value for the <MaskedInput />.
For controlled behaviour, see value.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      maskedValue: '564-___-___'
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Masked value: {this.state.maskedValue}
      </div>
      <MaskedInput
        mask="000-000-000"
        defaultValue="564"
        onChange={({ currentValue, maskedValue }) => {
          this.setState({
            value: currentValue,
            maskedValue
          })
        }}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
This prop will set the input as disabled.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { disabled: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.disabled}
          onChange={(disabled) => this.setState({ disabled })}
        >
          disabled
        </CheckBox>
      </div>
      <MaskedInput disabled={this.state.disabled} mask='+4(000)-000-000'/>
    </div>
  }
}

export default () => <App />
Bool
default: false
If set to true, will replace maskFiller with space when the input is blurred.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hideMaskFillOnBlur: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.hideMaskFillOnBlur}
          onChange={(hideMaskFillOnBlur) => this.setState({ hideMaskFillOnBlur })}
        >
          hideMaskFillOnBlur
        </CheckBox>
      </div>
      <MaskedInput hideMaskFillOnBlur={this.state.hideMaskFillOnBlur} mask='+4(000)-000-000'/>
    </div>
  }
}

export default () => <App />
String
default: undefined
Represents the string pattern of the mask. Using the maskDefinitions characters, we can build the patern that the masked input will respect.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
class App extends React.Component {
  render() {
    return <div>
      <div style={{marginBottom: 20}}>The following mask will accept phone numbers where user types in 9 digits.</div>
      <MaskedInput mask='+4(000)-000-000'/>
    </div>
  }
}

export default () => <App />
Object
default: undefined
To define a mask you can use the following:
  • 0 - Digit. Accepts any digit between 0 and 9.
  • 9 - Digit or Space. Accepts any digit between 0 and 9, plus space.
  • # - Digit or Space. Accepts any digit between 0 and 9, plus space, but also (+) and (-) signs.
  • L - Letter. Restricts input to letters a-z and A-Z. This rule is equivalent to [a-zA-Z] in regular expressions.
  • ? - Letter or Space. Restricts input to letters a-z and A-Z, plus space. This rule is equivalent to [a-zA-Z] in regular expressions.
  • & - Character. Accepts any character. The rule is equivalent to \S in regular expressions.
  • C - Character or Space. Accepts any character. The rule is equivalent to . in regular expressions.
  • A - Alphanumeric. Accepts letters and digits only.
  • a - Alphanumeric or Space. Accepts letters, digits and space only.
We can declare a new rule for a new character, like x, containing only numbers 4 and 5:
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

const maskDefinitions = {
  'x': /[45]/
};

class App extends React.Component {
  render() {
    return <div>
      <div style={{marginBottom: 20}}>Mask will match only 4 and 5 in the first 3 digits.</div>
      <MaskedInput
        maskDefinitions={maskDefinitions}
        mask='+4(xxx)-000-000'
      />
    </div>
  }
}

export default () => <App />
The maskDefinitions prop allows you to register new rules that can be used in the mask strings. Also, it allows overwriting existing rules. For example, we could ignore the '#' rule for a input that accepts hex codes.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

const hexCodeDefinitions = {
  '#': undefined,
  'h': /[A-F0-5]/
}

class App extends React.Component {
  render() {
    return <div>
      <div style={{marginBottom: 20}}>A custom hexadecimal color code mask with #hhhhhh and decimals only from 0 to 5</div>
      <MaskedInput
        mask='#hhhhhh'
        maskDefinitions={hexCodeDefinitions}
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
Represents the character to be used to fill in the gaps in the mask, where special characters defined in maskDefinitions will be. Defaults to _.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
class App extends React.Component {
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <div>Masked input with the default filler.</div>
        <MaskedInput mask='+4(000)-000-000'/>
      </div>
      <div>Masked input with <code>x</code> filler.</div>
      <MaskedInput maskFiller="x" mask='+4(000)-000-000'/>
    </div>
  }
}
export default () => <App />
String
default: undefined
Will set this placeholder to the input.
The placeholder works only when no mask is set.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

const mask = '+4(000)-000-00';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { mask: undefined }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={!!this.state.mask}
          onChange={(checked) => this.setState({ mask: checked ? mask : undefined})}
        >
          apply mask
        </CheckBox>
      </div>
      <MaskedInput placeholder="No mask set" mask={ this.state.mask ? mask : undefined }/>
    </div>
  }
}

export default () => <App />
Bool
default: false
If set to true will prevent any interaction on the input and also prevent focus, without adding the disabled style. Useful for async submission/async validation flows.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { readOnly: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.readOnly}
          onChange={(readOnly) => this.setState({ readOnly })}
        >
          readOnly
        </CheckBox>
      </div>
      <MaskedInput readOnly={this.state.readOnly} mask='+4(000)-000-000'/>
    </div>
  }
}

export default () => <App />
Number|String
default: undefined
Controlled value prop, used in combination with onChange to react changes the value.
onChange(valueObject) is called with an object containing the following properties:
  • currentValue - String, the string containing the raw value, without mask characters.
  • event - Object, the event that caused this change.
  • maskedValue - String, the string containing the mask as well as the value.
For uncontrolled behaviour, see defaultValue.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      value: '564',
      maskedValue: '564-___-___'
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Current value: {this.state.value}
      </div>
      <div style={{ marginBottom: 20 }}>
        Masked value: {this.state.maskedValue}
      </div>
      <MaskedInput
        mask="000-000-000"
        value={this.state.value}
        onChange={({ currentValue, maskedValue }) => {
          this.setState({
            value: currentValue,
            maskedValue
          })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Will be called whenever the input loses its focus. Will get called with an object containing:
  • maskedValue - String, the string containing the mask as well as the value.
  • currentValue - String, the string containing the raw value, without mask characters.
  • event - Object, the event that caused this change.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  return <div>
    <MaskedInput
      mask="+4(000)-000-000"
      onBlur={
        () => zippy.notification.first.addNotification({
          content: 'onBlur'
        })
      }
    />
    <NotificationBoard id="first" />
    </div>
}
Fn(valueObject)
default: undefined
Will be called whenever a change occurs in the masked input. Will get called with an object containing:
  • maskedValue - String, the string containing the mask as well as the value.
  • currentValue - String, the string containing the raw value, without mask characters.
  • event - Object, the event that caused this change.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  return <div>
    <MaskedInput
      mask="+4(000)-000-000"
      onChange={
        ({maskedValue, currentValue}) => zippy.notification.first.addNotification({
          content: 'maskedValue: ' + maskedValue + ' ; ' + ' currentValue: ' + currentValue
        })
      }
    />
    <NotificationBoard id="first" />
    </div>
}
Fn()
default: undefined
Will be called whenever the input is focused. Will get called with an object containing:
  • maskedValue - String, the string containing the mask as well as the value.
  • currentValue - String, the string containing the raw value, without mask characters.
  • event - Object, the event that caused this change.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {
  return <div>
    <MaskedInput
      mask="+4(000)-000-000"
      onFocus={
        () => zippy.notification.first.addNotification({
          content: 'onFocus'
        })
      }
    />
    <NotificationBoard id="first" />
    </div>
}
String
default: undefined
This prop will be passed as className to the <MaskedInput /> wrapper.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

export default () => <MaskedInput
  mask="+4(000)-000-000"
  className="masked-input-border-green"
/>
String
default: undefined
This prop will be passed as className to the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

export default () => <MaskedInput
  mask="+4(000)-000-000"
  inputClassName="masked-input-color-blue"
/>
Object
default: undefined
This prop will be passed as style to the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

export default () => <MaskedInput
  mask="+4(000)-000-000"
  inputStyle={{ color: 'blue', border: '1px solid lightgray' }}
/>
Object
default: undefined
This prop will be passed as style to the <MaskedInput /> wrapper.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'

export default () => <MaskedInput
  mask="+4(000)-000-000"
  style={{
    border: '1px solid orange',
    borderRadius: 5
  }}
/>
Fn()
undefined
Calling this function will blur the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
class App extends React.Component {
  onChange({currentValue}) {
    this.mi &&
    currentValue.toString().length === 9 &&
    this.mi.blur()
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        Input will loose focus after typing the last character
      </div>
      <div style={{marginBottom: 20}}>
        <MaskedInput
          ref={mi => this.mi = mi}
          onChange={this.onChange.bind(this)}
          mask="+4(000)-000-000"
          onBlur={() => {
            const button = document.getElementById('button');
            button.focus && button.focus();
            }
          }
        />
      </div>
      <a href="#" id="button" className="submit-button">
        Submit
      </a>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Calling this function will focus the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/MaskedInput/index.css'

class App extends React.Component {
  onClick() {
    this.mi && this.mi.focus()
  }
  render() {
    return <div>
      <p>
        <Button onClick={this.onClick.bind(this)}>
          Press to focus the input
        </Button>
      </p>
      <MaskedInput
        ref={mi => this.mi = mi}
        mask="+4(000)-000-000"
      />
    </div>
  }
}

export default () => <App />
Fn()
undefined
Calling this function will return the masked value of the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { maskedValue: 'edit to get the masked value' }
  }

  render() {
    return <div>
      <p>Masked value: {this.state.maskedValue}</p>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.setState({ maskedValue: this.mi.getMaskedValue() })}>
          Get masked value
        </Button>
      </div>
      <MaskedInput
        ref={mi => this.mi = mi}
        mask="+4(000)-000-000"
      />
    </div>
  }
}

export default () => <App />
Fn()
undefined
Calling this function will return the raw value of the input.
import React from 'react'
import MaskedInput from '@zippytech/react-toolkit/MaskedInput'
import '@zippytech/react-toolkit/MaskedInput/index.css'
import Button from '@zippytech/react-toolkit/Button'
  import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currentValue: 'edit to get the value' }
  }

  render() {
    return <div>
      <p>Raw value: {this.state.currentValue}</p>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.setState({ currentValue: this.mi.getValue() })}>
          Get value
        </Button>
      </div>
      <MaskedInput
        ref={mi => this.mi = mi}
        mask="+4(000)-000-000"
      />
    </div>
  }
}

export default () => <App />