npmpackage.info

Gathering detailed insights and metrics for @jablonski/react-imask

@jablonski/react-imask

vanilla javascript input mask

6.5.0

5,011

MIT

TypeScript

17.56 kB

333 3.6

Installations

npm install @jablonski/react-imask

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.12.0

NPM Version

8.19.2 Score

70.8

Supply Chain

97.3

Quality

74.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

15

Total

192

Closed

106

Merged

71

Issues

Open

53

Total

749

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

333

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

5,011 Stars

956 Commits

262 Forks

30 Watching

9 Branches

29 Contributors

Bundle Size

68.47 kB

Minified

17.56 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

6.5.0

Package Id

@jablonski/react-imask@6.5.0

Unpacked Size

93.14 kB

Size

16.46 kB

File Count

NPM Version

8.19.2

Node Version

18.12.0

Total Downloads

Cumulative downloads

Total Downloads

333

Last day

Compared to previous day

Last week

50%

Compared to previous week

Last month

133.3%

Compared to previous month

Last year

-35.4%

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, /* { onAccept, onComplete } */);
16  
17  return (
18    <input ref={ref} />
19  );
20}

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

@jablonski/react-imask

Installations

Developer Guide

Yes

CommonJS

18.12.0

8.19.2

Score

Pull Requests

15

192

106

71

Issues

53

749

696

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

68.47 kB

17.56 kB

Maintainers

Package Meta Information

Total Downloads

333

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