7.6.1 • Published 12 months ago

react-imask v7.6.1

Weekly downloads
21,515
License
MIT
Repository
github
Last release
12 months ago

React IMask Plugin

react-imask

npm version License: MIT

Install

npm install react-imask

Mask Input Example

import { useRef } from 'react';
import { IMaskInput } from 'react-imask';

// use ref to get access to internal "masked = ref.current.maskRef"
const ref = useRef(null);
const inputRef = useRef(null);
<IMaskInput
  mask={Number}
  radix="."
  value="123"
  unmask={true} // true|false|'typed'
  ref={ref}
  inputRef={inputRef}  // access to nested input
  // DO NOT USE onChange TO HANDLE CHANGES!
  // USE onAccept INSTEAD
  onAccept={
    // depending on prop above first argument is
    // `value` if `unmask=false`,
    // `unmaskedValue` if `unmask=true`,
    // `typedValue` if `unmask='typed'`
    (value, mask) => console.log(value)
  }
  // ...and more mask props in a guide

  // input props also available
  placeholder='Enter number here'
/>

Extend Existing Components

import { IMaskMixin } from 'react-imask';

// extend style component
const StyledInput = styled.input`
  color: green;
`;

const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
  <StyledInput
    {...props}
    innerRef={inputRef}  // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
  />
));

<MaskedStyledInput
  mask={Number}
  radix="."
  onAccept={(value, mask) => console.log(value)}
  // ...and more mask props in a guide

  // ...other styled props
/>

More options see in a guide.

Using hook

import { useState } from 'react';
import { useIMask } from 'react-imask';

function IMaskWithHook () {
  const [ opts, setOpts ] = useState({ mask: Number });
  const {
    ref,
    maskRef,
    value,
    setValue,
    unmaskedValue,
    setUnmaskedValue,
    typedValue,
    setTypedValue,
  } = useIMask(opts, /* optional {
    onAccept,
    onComplete,
    ref,
    defaultValue,
    defaultUnmaskedValue,
    defaultTypedValue,
  } */);
  
  return (
    <input ref={ref} />
  );
}
bolideai-polaris-ui-kitqui-ds-tssapphire-uicf-storybookempath-video-player@bumped-inc/loyalty.designfeathery-elementsxh-common-pckxinherc1feathery-reactreact-govbr-uixinherc_testreact-ts-form-gen-elements@self-kit/uimy-test-devcff-uireact-mui-form-generatorraylo-apollo@everything-registry/sub-chunk-2561caseark-uitr-vonus-nextjs-storybook-v1ilive-ui-kitnineid-coredmed-react-uitacamulestatest-iuriixinhercxinherc-h55xinherc49xmluixhhentablestonex-uivienna-ui@ditointernet/uai-components@co4/components@crysp/kit@comparaonline/admin@cyrilis/flame@calvient/decal@blockium/ui@canadi/ui@canopyinc/aura@personio/ui-componentsbgc-shared-frontend-componentsisigo-sdkjmapserver-ngnetbanking-admintr-vonus-ui@escaladesports/zygote-cartsomoffice-shelluikit12uikittest11uikitwwwwtesttourpass-frontend-components@aragon/gov-ui-kit@appfolio/react-gears@aragon/ods@amsom-habitat/bubbly@andrydharmawan/bgs-component@andrydharmawan/bgs-form@andrydharmawan/component-react@astral/components@axinom/mosaic-ui@backlight-dev/various-trouble-hjmth.bricks-l6ngliw7-fork-lgq24azv@backlight-dev/various-trouble-hjmth.bricks-lgq27cpj@backlight-dev/veil-steal-hej64.bricks-l7gtkkiy@backlight-dev/rapid-sweater-1n8dt.bricks-l3yzvl9g@backlight-dev/sillyleo.bricks-lccvkr2p@backlight-dev/soap-distribute-dux20.rjid@backlight-dev/setbrain.ink-forego-vnavb.bricks-l5gkcnmk@backlight-dev/power-drive-tgm7r.bricks-lo057i5n@backlight-dev/hdn-test.hdn-bricks@backlight-dev/human-apple-pfrt9.bricks-l0gqrlz3@backlight-dev/icky-boys-h9rid.bricks-lglce3zu@backlight-dev/another-one.bricks-2htydw13pkxg0gsvc@backlight-dev/cent-undress-o9ffc.bricks-l6ngliw7@bitrise/bitkit@bluemarble/bm-components@ceed/ads@ceed/cds@clearfacts/cf-storybook@acuteinformatics/netbanking-pvt@acuteinfo/common-base@bornlogic/reborn@delement/uizecoreuizygote-cart-clonezydon-common-v2@raisenow/tamaro-core@feathery/react@fieldmade/ui@gsretail.com/gui-core@hdriel/mui-simple@hapl/components@hightechplumbing/scheduler@highlight-ui/input@fluxusui/fluxusui-base@flexcavo/ui-kit@edunext/paragon@elsanpro/react-components
7.6.1

12 months ago

7.6.0

1 year ago

7.5.1-alpha.0

1 year ago

7.5.0

1 year ago

7.4.0

1 year ago

7.3.1-alpha.0

1 year ago

7.3.0

1 year ago

7.2.1

1 year ago

7.2.0

1 year ago

7.0.0-alpha.1

2 years ago

7.0.0-alpha.0

2 years ago

7.0.0-alpha.6

2 years ago

7.1.3

2 years ago

7.0.0-alpha.3

2 years ago

7.1.2

2 years ago

7.0.0-alpha.2

2 years ago

7.1.1

2 years ago

7.0.0-alpha.5

2 years ago

7.0.0-alpha.4

2 years ago

6.6.3

2 years ago

6.6.2

2 years ago

7.0.1-alpha.0

2 years ago

7.0.0

2 years ago

7.0.1-alpha.1

2 years ago

7.0.1

2 years ago

7.1.0-alpha.0

2 years ago

7.1.0-alpha.1

2 years ago

7.1.0-alpha.2

2 years ago

6.5.1-alpha.1

2 years ago

6.5.1-alpha.0

2 years ago

6.5.0

2 years ago

6.6.0-alpha.0

2 years ago

6.6.1

2 years ago

6.6.0

2 years ago

6.5.0-alpha.1

2 years ago

6.5.0-alpha.0

2 years ago

6.5.1

2 years ago

6.6.1-alpha.2

2 years ago

6.6.1-alpha.1

2 years ago

6.6.1-alpha.0

2 years ago

6.4.3-alpha.0

3 years ago

6.4.3-alpha.1

3 years ago

6.4.3

3 years ago

6.3.0

3 years ago

6.4.1-alpha.0

3 years ago

6.4.2

3 years ago

6.3.0-alpha.0

3 years ago

6.4.1

3 years ago

6.4.0

3 years ago

6.2.2

4 years ago

6.2.1

4 years ago

6.2.0

4 years ago

6.1.0

4 years ago

6.0.7

4 years ago

6.0.6

4 years ago

6.0.5

5 years ago

6.0.3

5 years ago

6.0.2

5 years ago

6.0.1

5 years ago

6.0.0

5 years ago

6.0.0-alpha.0

5 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.1.9

6 years ago

5.1.8

6 years ago

5.1.7

6 years ago

5.1.6

6 years ago

5.1.5

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.0

6 years ago

4.1.5

6 years ago

4.1.4

6 years ago

4.1.3

6 years ago

4.1.2

6 years ago

4.1.1

7 years ago

4.1.0

7 years ago

4.0.0

7 years ago

3.4.0

7 years ago

3.3.0

7 years ago

3.2.4

7 years ago

3.2.3

7 years ago

3.2.2

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.0.0

7 years ago

0.1.0

7 years ago

0.0.1

7 years ago