npmpackage.info

Gathering detailed insights and metrics for rifm

Other packages similar to rifm

react-use-mask

0.4.3

![npm version](https://img.shields.io/npm/v/react-use-mask)

@lewisl9029/rifm

0.0.2

Tiny react input formatter and mask

@outofaxis/fugo-ui-kit

15.6.4

React components Kit for Fugo

@leonardodino/rifm

0.3.0

Tiny react input formatter and mask

Gathering detailed insights and metrics for rifm

rifm

React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc

0.12.1

1,304

MIT

JavaScript

251,951,945 2.1

Installations

npm install rifm

Pull Requests

Open

19

Total

104

Closed

17

Merged

68

Issues

Open

15

Total

35

Closed

20

Releases

v0.12.0

Published on 01 Jun 2020

v0.11.0

Published on 07 Feb 2020

Mask improvements

0.10.0

Published on 21 Oct 2019

v0.9.0

Published on 03 Jun 2019

0.8.0

Published on 27 May 2019

Letter case support

v0.7.0

Published on 21 Feb 2019

View all 11 releases

Developer

istarkov

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

NPM Version

Statistics

1,304 Stars

152 Commits

44 Forks

13 Watching

21 Branches

9 Contributors

Updated on 27 Nov 2024

Languages

JavaScript (99.03%)

TypeScript (0.97%)

Total Downloads

Cumulative downloads

Total Downloads

251,951,945

Last day

-2.5%

210,692

Compared to previous day

Last week

4.9%

1,052,921

Compared to previous week

Last month

9.2%

4,467,639

Compared to previous month

Last year

-23.8%

55,755,255

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Путин Убийца

RIFM - React Input Format & Mask

Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input.

Demo

Highlights

Requires React 16.8+
Dependency free
Tiny (≈ 800b)
Supports any input.
Can mask input, format and more
Small readable source
flow + typescript definitions

Example

Rifm offers both a Render Prop and a Hook API:

Render Prop

1import { Rifm } from 'rifm';
2import { TextField } from '@material-ui/core';
3
4const numberFormat = (str: string) => {
5  const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
6  return r ? r.toLocaleString('en') : '';
7}
8
9...
10
11  const [value, setValue] = React.useState('')
12
13  <Rifm
14    value={value}
15    onChange={setValue}
16    format={numberFormat}
17  >
18    {({ value, onChange }) => (
19      <TextField
20        type="tel"
21        value={value}
22        onChange={onChange}
23      />
24    )}
25  </Rifm>
26
27...

Hook

1import { useRifm } from 'rifm';
2import { TextField } from '@material-ui/core';
3
4const numberFormat = (str: string) => {
5  const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
6  return r ? r.toLocaleString('en') : '';
7}
8
9...
10
11  const [value, setValue] = React.useState('')
12
13  const rifm = useRifm({
14    value,
15    onChange: setValue,
16    format: numberFormat
17  })
18
19  <TextField
20    type="tel"
21    value={rifm.value}
22    onChange={rifm.onChange}
23  />
24
25...

Install

1yarn add rifm

API

Terminology

Rifm is based on simple idea (*):

format operation applied to input value after edit doesn't change the order of some symbols before cursor

* This is not always true, but we solve some edge cases where it's not.

Imagine you have simple integer number formatter with ` as thousands separator and current input state is 123`4|67 ("|" shows current cursor position).

User press 5 then formatted input must be equal to 1`234`5|67.

The overall order of elements has changed (was 1->2->3->`->4->... became 1->`->2->3->4...) but the order of digits before cursor hasn't changed (was 1->2->3->4 and hasn't changed).

The same is true for float numbers formatting, dates and more. Symbols with preserved order are different and depends on format. We call this kind of symbols - "accepted" symbols.

Rifm solves only one task - find the right place for cursor after formatting.

Knowledge about what symbols are "accepted" and cursor position after any user action is enough to find the final cursor position.

Most operations which are not covered with above idea like case enforcements, masks guides, floating point ","=>"." replacement can be done using simple postprocessing step - replace. This operation works well if you need to change input value without loosing cursor position.

And finaly masks - masks are usually is format with replace editing mode + some small cursor visual hacks.

Input Props

These are accepted by the Rifm component as props and the useRifm hook as named arguments.

Prop	type	default	Description
accept	RegExp (optional)	/\d/g	Regular expression to detect "accepted" symbols
format	string => string		format function
value	string		input value
onChange	string => void		event fired on input change
children	({ value, onChange }) => Node		value and onChange handler you need to pass to underlying input element
mask	boolean (optional)		use replace input mode if true, use cursor visual hacks if prop provided
replace	string => string (optional)		format postprocessor allows you to fully replace any/all symbol/s preserving cursor
append	string => string (optional)		format postprocessor called only if cursor is in the last position and new symbols added, used for specific use-case to add non accepted symbol when you type

Output Props

These will be passed into the children render prop for the Rifm component as named arguments, and returned from the useRifm hook as an object.

Prop	type	default	Description
value	string		A formatted string value to pass as a prop to your input element
onChange	SyntheticEvent => void		The change handler to pass as a prop to your input element

See the Demo there are a lot of examples there.

Thanks

@TrySound for incredible help and support on this

No vulnerabilities found.

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

Code-Review

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

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

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.

Reason

79 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9
Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx
Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

2.1

/10

Last Scanned on 2024-11-18

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 rifm

Other packages similar to rifm

rifm

Installations

Pull Requests

19

104

17

68

Issues

15

35

20

Releases

Developer

Developer Guide

CommonJS

No

Statistics

Languages

Total Downloads

251,951,945

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Путин Убийца

RIFM - React Input Format & Mask

Highlights

Example

Render Prop

Hook

Install

API

Terminology

Input Props

Output Props

Thanks

10

10

3

0

0

0

0

0

0

0

2.1

/10