npmpackage.info

react-imask

vanilla javascript input mask

7.6.1

5,011

MIT

TypeScript

17.19 kB

33,879,972 3.6

Installations

npm install react-imask

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

21.7.3

NPM Version

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Score

96.4

Supply Chain

99.5

Quality

79.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

15

Total

192

Closed

106

Merged

71

Issues

Open

52

Total

748

Closed

696

Releases

v7.6.1

Published on 21 May 2024

v7.6.0

Published on 09 Apr 2024

v7.5.0

Published on 28 Feb 2024

v7.4.0

Published on 08 Feb 2024

v7.3.0

Published on 25 Dec 2023

v7.2.1

Published on 18 Dec 2023

View all 71 releases

Contributors

Unable to fetch Contributors

View all 29 contributors

Languages

TypeScript

JavaScript

HTML

Ruby

TypeScript (93.31%)

JavaScript (3.67%)

HTML (2.96%)

Ruby (0.05%)

Developer

uNmAnNeR

Download Statistics

Total Downloads

33,879,972

Last Day

65,296

Last Week

290,974

Last Month

1,310,757

Last Year

15,448,955

GitHub Statistics

5,011 Stars

956 Commits

262 Forks

30 Watching

9 Branches

29 Contributors

Bundle Size

63.52 kB

Minified

17.19 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

7.6.1

Package Id

react-imask@7.6.1

Unpacked Size

121.52 kB

Size

17.26 kB

File Count

NPM Version

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Node Version

21.7.3

Publised On

21 May 2024

Total Downloads

Cumulative downloads

Total Downloads

33,879,972

Last day

-11.3%

65,296

Compared to previous day

Last week

-15.8%

290,974

Compared to previous week

Last month

6.4%

1,310,757

Compared to previous month

Last year

44.7%

15,448,955

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React IMask Plugin

react-imask

Install

npm install react-imask

Mask Input Example

1import { useRef } from 'react';
2import { IMaskInput } from 'react-imask';
3
4// use ref to get access to internal "masked = ref.current.maskRef"
5const ref = useRef(null);
6const inputRef = useRef(null);
7<IMaskInput
8  mask={Number}
9  radix="."
10  value="123"
11  unmask={true} // true|false|'typed'
12  ref={ref}
13  inputRef={inputRef}  // access to nested input
14  // DO NOT USE onChange TO HANDLE CHANGES!
15  // USE onAccept INSTEAD
16  onAccept={
17    // depending on prop above first argument is
18    // `value` if `unmask=false`,
19    // `unmaskedValue` if `unmask=true`,
20    // `typedValue` if `unmask='typed'`
21    (value, mask) => console.log(value)
22  }
23  // ...and more mask props in a guide
24
25  // input props also available
26  placeholder='Enter number here'
27/>

Extend Existing Components

1import { IMaskMixin } from 'react-imask';
2
3// extend style component
4const StyledInput = styled.input`
5  color: green;
6`;
7
8const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
9  <StyledInput
10    {...props}
11    innerRef={inputRef}  // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
12  />
13));
14
15<MaskedStyledInput
16  mask={Number}
17  radix="."
18  onAccept={(value, mask) => console.log(value)}
19  // ...and more mask props in a guide
20
21  // ...other styled props
22/>

More options see in a guide.

Using hook

1import { useState } from 'react';
2import { useIMask } from 'react-imask';
3
4function IMaskWithHook () {
5  const [ opts, setOpts ] = useState({ mask: Number });
6  const {
7    ref,
8    maskRef,
9    value,
10    setValue,
11    unmaskedValue,
12    setUnmaskedValue,
13    typedValue,
14    setTypedValue,
15  } = useIMask(opts, /* optional {
16    onAccept,
17    onComplete,
18    ref,
19    defaultValue,
20    defaultUnmaskedValue,
21    defaultTypedValue,
22  } */);
23  
24  return (
25    <input ref={ref} />
26  );
27}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2025-01-20

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-imask

react-native-imask

7.6.1

React Native Input Mask

@jablonski/react-imask

6.5.0

React input mask

@mirco312312/react-imask

6.0.6

React input mask

@synchronous/react-imask

6.2.2-beta

React input mask

react-imask

Installations

Developer Guide

Yes

ESM

21.7.3

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Score

Pull Requests

15

192

106

71

Issues

52

748

696

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

63.52 kB

17.19 kB

Maintainers

Package Meta Information

Total Downloads

33,879,972

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React IMask Plugin

Install

Mask Input Example

Extend Existing Components

Using hook

10

10

10

10

3

0

0

0

0

0

0

0

0

3.6

/10

Other packages similar to react-imask