Zippytech | React Toolkit Docs

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 />

disabled

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 />

hideMaskFillOnBlur

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 />

mask

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 />

maskDefinitions

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 />

maskFiller

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 />

placeholder

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 />

readOnly

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 />

value

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 />

Callback props

onBlur

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>
}

onChange

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>
}

onFocus

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>
}

Styling props

className

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"
/>

inputClassName

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"
/>

inputStyle

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' }}
/>

style

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
  }}
/>

Methods

blur

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 />

focus

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 />

getMaskedValue

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 />

getValue

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 />

MaskedInput / Styling & Theming

Menu / Getting started