Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enhancer: Field mask

See original GitHub issue


Need to introduce field format.


It’s quite comfortable to have the value entered formatted in the pre-defined way.


Field format/template will enforce the provided value to be in the provided format/template. Formatting works onChange and on paste.


Imagine there’s a cardNumber field for entering your credit card’s number. It’s great to have the value be 4 digits separated with spaces while the user types.

  format="#### #### #### ####"
  required />

This will enforce the given format while user types.


  1. Field should behave as templated whenever it has a format prop.
  2. Field formatting happens onChange and onBlur to ensure it’s strictly followed.
  3. The core functionality for field formatting is a pure function (formatField({ fieldProps }) for example). It should have nothing to do with the form, its context, or whatsoever. Takes props and ensures that the value is in the proper format.
  4. A char # is used as a placeholder for an actual entered value. Therefore, an expected format of format (lol) is ###-###-###, for example. # are then substituted by the actual field value.
  5. Format should be ensure when the field mounts (registers in the form). This way initial values are formatted as well.
  6. (Optional) Maybe we should think of situations when the end developer will not supply the whole format, but its beginning only?

Test scenarios

  1. Credit card number: #### #### #### ####
  2. Phone number: +(###) ### ### ###
  3. Birth date: ##/##/####

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (9 by maintainers)

github_iconTop GitHub Comments

Vidleccommented, Nov 30, 2017

We can use custom “mask” string. Consider: passing XXX{-}XXX{-}XX will add dashes like this: 082-233-22

kettanaitocommented, Jun 10, 2019

Hello, @aazcast.

No, this feature has been agreed to be too specific for a form to handle. We were working on introduction of granular field lifecycle methods in createField API. The API is released and stable, so you should use it instead.

It should be possible to implement a value masking as follows (pseudo code):

import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'

const Input = (props) => {
  const { fieldProps } = props
  return <input {...fieldProps} />

export default createField({
  // include default "input" preset to support default input props propagation
  // (i.e. "accept", "multiple", "maxLength", etc.)

  // below provide custom field properties to implement a masking feature:

  // use "mapValue"
  // to alter the value of a field in its initial state and upon any interactions
  mapValue: (value) => {
    // return a masked string. you would have to implement "maskValue" yourself
    // depending on your needs.
    // example: maskValue('123456') // 123-456
    return maskValue(value)

You may also want to use assertValue to prevent treating chunks of a mask as an actual value. Imagine you always append + (123) via mask to the actual value. Then you don’t want for + (123) to be considered as a field having value. assertValue can help you to account for that if you return false conditionally.

Let me know if this answers your question.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Con-CUSHION Mask Enhancer | Gerry Davis Sports
Introducing the Con-CUSHION Mask Enhancer - a new product designed to be attached to your umpire or catcher's mask to reduce the risk...
Read more >
Impact of mask enhancer on 65-nm node contacts - IEEE Xplore
Introduction. Fabricating contacts for sub-65-nm node LSk with an ArF exposure tool is a major challenge in optical lithography because it is very...
Read more >
formik-enhancer - npm
Formik generator. Latest version: 1.0.8, last published: 3 years ago. Start using formik-enhancer in your project by running `npm i ...
Read more >
Do I Still Need The Color Enhancer? Yes, In This One Situation
The value add of the Color Enhancer is that it is an Effects filter and you have the masking tools. Target the purity...
Read more >
Mask Enhancer Technology with Source Mask Optimization (SMO ...
Request PDF | Mask Enhancer Technology with Source Mask Optimization (SMO) for 2Xnm-node Logic Layout Gate Fabrication | Strong resolution enhancement ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found