Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-currency-mask
Advanced tools
Readme
react-currency-mask is a lib to help you mask currencies while the user types the values. Supports BRL currency
$ yarn add react-currency-mask
# or with npm
$ npm install react-currency-mask --save
First, you need to import the CurrencyInput component. It receives any kind of input in order to give you control of styling and other third party libs.
For example, you can pass inside the CurrencyInput a Chakra UI Input, MUI Input, your own styled input and so on.
<CurrencyInput
onChangeValue={(event, originalValue, maskedValue) => {
console.log(event, originalValue, maskedValue);
}}
/>
onChangeValue
Required, function that triggers after the value of input changes. It returns the Input Event, original value and masked value.
InputElement
Optional, must be a React Element. It can be from a Third Party library (such as MUI, Chakra UI, or any other...) or your own custom Input.
onBlur
Optional, function that triggers after blur. It returns the Input Event, original value and masked value.
onFocus
Optional, function that triggers after focused. It returns the Input Event, original value and masked value.
onKeyPress
Optional, function that triggers after any key press. It returns the Keyboard Event, original value and masked value.
defaultValue
Optional, default value of the Input.
value
Optional, value of the input if you want to control it.
max
Optional, max value permitted.
currency
Optional, currency you want to use as mask. Default is BRL.
locale
Optional, locale you want to format currency. Default is pt-BR
.
hideSymbol
Optional, boolean to control the currency symbol display.
autoSelect
Optional, if you want to select the value of input when clicking it.
autoReset
Optional, if you want to reset the value after blur.
import { CurrencyInput } from 'react-currency-mask';
const MyComponent = () => {
return (
<CurrencyInput
onChangeValue={(event, originalValue, maskedValue) => {
console.log(event, originalValue, maskedValue);
}}
/>
);
};
Example output
import { CurrencyInput } from 'react-currency-mask';
import { TextField } from '@mui/material';
const MyComponent = () => {
return (
<CurrencyInput
onChangeValue={(event, originalValue, maskedValue) => {
console.log(event, originalValue, maskedValue);
}}
InputElement={<TextField label="Custom Input" size="small" />}
/>
);
};
*This example uses a MUI TextField
Example output
import { CurrencyInput } from 'react-currency-mask';
import { Controller, useFormContext } from 'react-hook-form';
type MyComponentProps = {
name: string,
};
const MyComponent = ({ name }: MyComponentProps) => {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field }) => (
<CurrencyInput
value={field.value}
onChangeValue={(_, value) => {
field.onChange(value);
}}
InputElement={<MyCustomInput />}
/>
)}
/>
);
};
*Input Element is optional, use it just if you want a custom input
react-currency-mask is MIT licensed.
FAQs
React Input that handles and apply currency masks in your own inputs
The npm package react-currency-mask receives a total of 1,344 weekly downloads. As such, react-currency-mask popularity was classified as popular.
We found that react-currency-mask demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.