New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-currency-input-field

Package Overview
Dependencies
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-currency-input-field - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

137

package.json
{
"name": "react-currency-input-field",
"version": "1.0.0",
"description": "React Currency Input Field",
"main": "index.js",
"version": "1.0.1",
"description": "React <input /> component for formatting currency and numbers.",
"files": [
"dist/**/*"
],
"main": "dist/index.js",
"types": "dist/index",
"homepage": "https://cchanxzy.github.io/react-currency-input-field",
"scripts": {
"build": "NODE_ENV='production' ./node_modules/webpack/bin/webpack.js",
"start": "NODE_ENV='dev' ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "./node_modules/mocha/bin/mocha --require babel-register --watch"
"build": "rm -rf dist && tsc && NODE_ENV='prod' webpack --mode=production",
"start": "NODE_ENV='dev' webpack-dev-server --mode=development --hot",
"test": "jest --coverage",
"test:watch": "jest --coverage --watch",
"lint": "tsc && eslint 'src/**/*.{js,ts,tsx}' --max-warnings=0",
"gh-predeploy": "NODE_ENV='dev' webpack --mode=development",
"gh-deploy": "yarn gh-predeploy && gh-pages -d dist",
"ci": "yarn && yarn build",
"codecov": "codecov",
"semantic-release": "semantic-release"
},
"author": "Chun",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/cchanxzy/React-Currency-Input-Field"
"url": "https://github.com/cchanxzy/react-currency-input-field"
},
"bugs": {
"email": "cchan.xzy@gmail.com",
"url": "https://github.com/cchanxzy/react-currency-input-field/issues"
},
"keywords": [
"react-component",
"react",
"component",
"currency",
"input",
"form",
"field",
"number",
"number-format",
"mask"
"input"
],
"author": "cchanxzy",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"chai": "^4.1.2",
"compression-webpack-plugin": "^1.0.1",
"css-loader": "^0.28.7",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-mocha": "^5.0.0",
"eslint-plugin-react": "^7.4.0",
"jest": "^21.2.1",
"mocha": "^4.0.1",
"react-test-renderer": "^16.0.0",
"react-test-utils": "0.0.1",
"style-loader": "^0.19.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@semantic-release/changelog": "^5.0.1",
"@semantic-release/git": "^9.0.0",
"@types/enzyme": "^3.10.5",
"@types/jest": "^25.2.1",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0",
"awesome-typescript-loader": "^5.2.1",
"codecov": "^3.6.5",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"gh-pages": "^2.2.0",
"html-webpack-plugin": "^4.2.0",
"husky": "^4.2.5",
"jest": "^25.4.0",
"lint-staged": "^10.1.7",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.20",
"semantic-release": "^17.0.7",
"source-map-loader": "^0.2.4",
"ts-jest": "^25.4.0",
"typescript": "^3.8.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"browserslist": "last 2 versions",
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"jsdom-global": "^3.0.2",
"prop-types": "^15.6.1",
"react": "^16.0.0",
"react-dom": "^16.0.0"
"peerDependencies": {
"react": "^16.9.0"
},
"dependencies": {},
"jest": {
"verbose": false,
"collectCoverage": true,
"setupFilesAfterEnv": [
"./.enzymerc.js"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
]
},
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"pre-commit": "yarn lint",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}

@@ -1,28 +0,74 @@

## React Currency Input Field
# React Currency Input Field Component
Quick project to create a React component for inputting currency
[![npm](https://img.shields.io/npm/v/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![NPM](https://img.shields.io/npm/l/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![Codecov Coverage](https://img.shields.io/codecov/c/github/cchanxzy/react-currency-input-field)](https://codecov.io/gh/cchanxzy/react-currency-input-field/) [![Release build](https://github.com/cchanxzy/react-currency-input-field/workflows/Release/badge.svg)](https://github.com/cchanxzy/react-currency-input-field/actions?query=workflow%3ARelease)
[Live Demo](https://chunkitchan.net/react-currency-input-field/)
## Features
### Install
Install packages
- Allows abbreviations eg. 1k = 1,000 2.5m = 2,500,000
- Prefix option eg. £ or \$
- Can allow/disallow decimals
- Automatically inserts comma separator
- Only allows valid numbers
- Lightweight and simple
``npm install``
## Demo
### Development
To run local server
[Live Demo](https://cchanxzy.github.io/react-currency-input-field)
``npm run start``
![React Currency Input Demo](demo/demo.gif)
View in browser: `localhost:3000`
## Install
Run tests:
`npm install react-currency-input-field`
``npm run test``
or
### Production
To build production
`yarn add react-currency-input-field`
``npm run build``
## Usage
Everything is built in `/build`
```js
import CurrencyInput from 'react-currency-input-field';
<CurrencyInput
id="input-example"
name="input-name"
placeholder="£1,000"
defaultValue={1000}
allowDecimals={true}
decimalsLimit={2}
onChange={(value, name) => console.log(value, name)}
/>;
```
Have a look in [`src/examples`](https://github.com/cchanxzy/react-currency-input-field/tree/master/src/examples) for more examples on implementing and validation.
## Abbreviations
It can parse values with abbreviations `k`, `m` and `b`
Examples:
- 1k = 1,000
- 2.5m = 2,500,000
- 3.456B = 3,456,000,000
## Props
| Name | Type | Default | Description |
| ------------- | ---------- | ------- | -------------------------------------------------------- |
| allowDecimals | `boolean` | `true` | Allow decimals |
| id | `string` | | Component id |
| name | `string` | | Component (input) name |
| className | `string` | | Class names |
| decimalsLimit | `number` | `2` | Limit length of decimals allowed |
| defaultValue | `number` | | Default value |
| disabled | `boolean` | `false` | Disabled |
| onChange | `function` | | Handle change in value. Value will be `null` or `number` |
| placeholder | `string` | | Placeholder if no value |
| prefix | `string` | | Include a prefix eg. £ or \$ |
| maxLength | `number` | | Maximum characters the user can enter |
## Issues
Feel free to message me if you have any questions
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc