redux-form-input-masks - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

		@@ -0,1 +1,9 @@
		<a name="0.4.1"></a>
		## [0.4.1](https://github.com/renato-bohler/redux-form-input-masks/compare/v0.4.0...v0.4.1) (2018-03-12)


		### Bug Fixes

		* fixes dependency vulnerability on examples project ([42cfc5f](https://github.com/renato-bohler/redux-form-input-masks/commit/42cfc5f))

		<a name="0.4.0"></a>
		@@ -2,0 +10,0 @@ # [0.4.0](https://github.com/renato-bohler/redux-form-input-masks/compare/v0.3.13...v0.4.0) (2018-03-11)

package.json

		{
		"name": "redux-form-input-masks",
		"version": "0.4.0",
		"version": "0.4.1",
		"description": "Input masking with redux-form made easy",
		@@ -5,0 +5,0 @@ "main": "./dist/bundle.js",

README.md

		@@ -74,56 +74,37 @@ # redux-form-input-masks

		The following is a use case for [`createNumberMask`](https://renato-bohler.github.io/redux-form-input-masks/#/number-mask). It consists of two inputs that convert bitcoins to euros and vice versa. You can see it running on [codesandbox.io](https://codesandbox.io/s/v0rj4p6y0). Please note that this convertion does not reflect real conversion rates.
		You can find several examples including demos on our [documentation](https://renato-bohler.github.io/redux-form-input-masks).

		Here's a simple snippet that uses `createNumberMask` and `createTextMask` and applies them to `Field`s:

		```jsx
		import React from 'react';
		import { connect } from 'react-redux';
		import { Field, reduxForm, change } from 'redux-form';
		import { createNumberMask } from 'redux-form-input-masks';
		import { createNumberMask, createTextMask } from 'redux-form-input-masks';

		const conversionRate = 6800;
		(...)

		let GettingStarted = props => {
		const btcChange = btc => {
		props.change('gettingStarted', 'EUR', btc * conversionRate);
		};
		const currencyMask = createNumberMask({
		prefix: 'US$ ',
		suffix: ' per item',
		decimalPlaces: 2,
		locale: 'en-US',
		})

		const eurChange = eur => {
		props.change('gettingStarted', 'BTC', eur / conversionRate);
		};
		const phoneMask = createTextMask({
		pattern: '(999) 999-9999',
		});

		const btcMask = createNumberMask({
		prefix: 'BTC ',
		decimalPlaces: 5,
		locale: 'en-US',
		onChange: btcChange,
		});
		(...)

		const eurMask = createNumberMask({
		suffix: ' €',
		decimalPlaces: 2,
		locale: 'de',
		onChange: eurChange,
		});
		<Field
		name="amount"
		component="input"
		type="tel"
		{...currencyMask}
		/>

		return (
		<form>
		<div>
		<Field name="BTC" component="input" type="tel" {...btcMask} />
		<Field name="EUR" component="input" type="tel" {...eurMask} />
		</div>
		</form>
		);
		};

		const mapStateToProps = undefined;

		const mapDispatchToProps = dispatch => ({
		change: (form, field, value) => dispatch(change(form, field, value)),
		});

		GettingStarted = connect(mapStateToProps, mapDispatchToProps)(GettingStarted);

		export default reduxForm({
		form: 'gettingStarted',
		})(GettingStarted);
		<Field
		name="phone"
		component="input"
		type="tel"
		{...phoneMask}
		/>
		```
		@@ -130,0 +111,0 @@

redux-form-input-masks - npm Package Compare versions

Worsened metrics