<MaskedInput />
.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 />
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 />
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 />
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 />
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.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 />
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 />
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 />
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 />
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 />
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.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 />
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>
}
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>
}
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>
}
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"
/>
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"
/>
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
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
}}
/>
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 />
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 />
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 />
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 />