Numbers Probably Matter

    react-text-mask-legacy

    5.5.2 • Public • Published

    React Input Mask

    Getting started

    First, install it.

    npm i react-text-mask-legacy --save

    Then, require it and use it.

    import React from 'react'
    import MaskedInput from 'react-text-mask-legacy'
    
    export default () => (
      <div>
        <MaskedInput
          mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        />
      </div>
    )

    <MaskedInput/> is fully compatible with <input/> element. So, you can pass it CSS classes, a placeholder attribute, or even an onBlur handler.

    For example, the following works:

    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      className="form-control"
      placeholder="Enter a phone number"
      guide={false}
      id="my-input-id"
      onBlur={() => {}}
      onChange={() => {}}
    />

    Documentation

    For more information about the props that you can pass to the component, see the documentation here.

    Example

    To see an example of the code running, follow these steps:

    1. Clone the repo, git clone git@github.com:Gruven/text-mask.git
    2. cd text-mask
    3. npm install
    4. npm run react:dev
    5. Open http://localhost:3000

    The code of the example is in react/example.

    Customize Rendered <input> Component

    For advanced uses, you can customize the rendering of the resultant <input> via a render prop. This is entirely optional, if no render prop is passed, a normal <input> is rendered.

    For example, to use with styled-components, which requires an innerRef:

    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholder="Enter a phone number"
      id="my-input-id"
      render={(ref, props) => (
        <MyStyledInput innerRef={ref} {...props} />
      )}
    />
    
    const MyStyledInput = styled.input`
      background: papayawhip;
    `;

    Contributing

    We would love some contributions! Check out this document to get started.

    Install

    npm i react-text-mask-legacy

    DownloadsWeekly Downloads

    22

    Version

    5.5.2

    License

    Unlicense

    Unpacked Size

    2.57 MB

    Total Files

    15

    Last publish

    Collaborators

    • gruven