react-imask
Advanced tools
Comparing version 0.0.1 to 0.1.0
{ | ||
"name": "react-imask", | ||
"version": "0.0.1", | ||
"version": "0.1.0", | ||
"description": "React input mask", | ||
"main": "index.js", | ||
"main": "dist/react-imask.js", | ||
"module": "src/index.js", | ||
"scripts": { | ||
"test": "npm run test" | ||
"test": "npm run test", | ||
"build": "rollup -c", | ||
"prepublishOnly": "npm run build" | ||
}, | ||
@@ -19,4 +22,29 @@ "repository": { | ||
], | ||
"files": [ | ||
"src", | ||
"dist" | ||
], | ||
"author": "Alexey Kryazhev", | ||
"license": "MIT" | ||
"license": "MIT", | ||
"dependencies": { | ||
"imask": "latest", | ||
"prop-types": "^15.6.0" | ||
}, | ||
"peerDependencies": { | ||
"react": ">=0.14.0" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26.0", | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
"babel-plugin-transform-object-assign": "^6.22.0", | ||
"babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
"babel-preset-env": "^1.6.1", | ||
"rollup": "^0.52.0", | ||
"rollup-plugin-babel": "^3.0.2", | ||
"rollup-plugin-eslint": "^4.0.0" | ||
}, | ||
"engines": { | ||
"npm": ">=4.0.0" | ||
}, | ||
"homepage": "https://unmanner.github.io/imaskjs/" | ||
} |
@@ -1,4 +0,59 @@ | ||
# react-imask | ||
React input mask | ||
# React IMask Plugin | ||
react-imask | ||
## TODO | ||
[![npm version](https://badge.fury.io/js/react-imask.svg)](https://badge.fury.io/js/react-imask) | ||
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) | ||
## Install | ||
`npm install react-imask` | ||
## Mask input example | ||
```javascript | ||
import {IMaskInput} from 'react-imask'; | ||
<IMaskInput | ||
mask=Number, | ||
radix=".", | ||
value="123", // possible to use `unmaskedValue`, but not both | ||
onAccept={ | ||
// first argument is `value` or `unmaskedValue` depending on prop above | ||
(value, mask) => console.log(value) | ||
}, | ||
// ...and more mask props in a guide | ||
// input props also available | ||
placeholder='Enter number here' | ||
/> | ||
``` | ||
## Extend existing components | ||
```javascript | ||
import {IMaskMixin} from 'react-imask'; | ||
// extend style component | ||
const StyledInput = styled.input` | ||
color: paleviolet; | ||
`; | ||
const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => ( | ||
<StyledInput | ||
...props, | ||
innerRef={inputRef} // bind internal input | ||
/> | ||
)); | ||
<MaskedStyledInput | ||
mask=Number, | ||
radix=".", | ||
onAccept={(value, mask) => console.log(value)}, | ||
// ...and more mask props in a guide | ||
// ...other styled props | ||
/> | ||
``` | ||
More options see in a [guide](https://unmanner.github.io/imaskjs/guide.html). | ||
## Many thanks to | ||
[@Yordis Prieto](https://github.com/yordis) | ||
[@Alexander Kiselev](https://github.com/MaaKut) |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
24251
8
308
1
60
3
8
+ Addedimask@latest
+ Addedprop-types@^15.6.0
+ Added@babel/runtime-corejs3@7.24.7(transitive)
+ Addedcore-js-pure@3.37.1(transitive)
+ Addedimask@7.6.1(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-is@16.13.1(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)