Semantic-ui-react: Input Masks

Created on 7 Nov 2016 · 4Comments · Source: Semantic-Org/Semantic-UI-React

I'm so sorry if this not right place to ask this question, but does anyone already used masks on Form.Input Class?

question

Source

picorelli

👍1

Most helpful comment

Here's a simple example using text-mask

<Form.Input
  label="Phone"
  name="phone"
  children={
    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholder="(123) 456-7890"
    />
  }
/>

Palisand on 10 Apr 2017

👍8 👎6 ❤2

All 4 comments

I have not tried this but you may be able to use something like the below to either render an <Input as={MaskedInput} /> or wrap them together and use the value of the MaskedInput as the value for the Input:

https://github.com/text-mask/text-mask
https://github.com/sanniassin/react-input-mask

levithomason on 7 Nov 2016

Here's a simple example using text-mask

<Form.Input
  label="Phone"
  name="phone"
  children={
    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholder="(123) 456-7890"
    />
  }
/>

Palisand on 10 Apr 2017

👍8 👎6 ❤2

@ehauzman please use Stack Overflow for usage questions if you are not reporting a bug. It's going to give you much better answers than asking questions on old posts unrelated to the function you are working on.

brianespinosa on 9 Feb 2018

text-mask doesn't properly work with React Semantic Ui, especially if I want to use icons and similar stuff.
They recommend using ref, but all my attempts didn't reproduced the expected behavior. Sometimes the mask just don't work, or the input doesn't get formatted as expected.