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
Installations
npm install rifm
Developer
Developer Guide
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
Peer Dependencies
1
Dev Dependencies
37
Путин Убийца
RIFM - React Input Format & Mask
Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input.
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.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 10/29 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
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