npmpackage.info

@mirco312312/react-imask

vanilla javascript input mask

6.0.6

5,010

MIT

TypeScript

15.18 kB

19,792 3.6

Installations

npm install @mirco312312/react-imask

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.13.1

NPM Version

6.14.5 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

19,792

Last Day

Last Week

Last Month

Last Year

1,753

GitHub Statistics

5,010 Stars

956 Commits

262 Forks

30 Watching

9 Branches

29 Contributors

Bundle Size

55.87 kB

Minified

15.18 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

6.0.6

Package Id

@mirco312312/react-imask@6.0.6

Unpacked Size

37.38 kB

Size

9.35 kB

File Count

NPM Version

6.14.5

Node Version

12.13.1

Total Downloads

Cumulative downloads

Total Downloads

19,792

Last day

-75%

Compared to previous day

Last week

-77.4%

Compared to previous week

Last month

62.2%

Compared to previous month

Last year

16.4%

1,753

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

imask prop-types

Peer Dependencies

react

Versions

React IMask Plugin

react-imask

Install

npm install react-imask

Mask Input Example

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

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.

Many Thanks to

@Yordis Prieto

@Alexander Kiselev

Support Development

Paypal

No vulnerabilities found.

10

Token-Permissions

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

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

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

Code-Review

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

0

CII-Best-Practices

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

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-27

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