@opuscapita/react-formatted-input NPM

react-formatted-input

Description

Describe the component here

Installation

npm install @opuscapita/react-formatted-input

Demo

View the DEMO

Change log

View the Change log

Migrate guide

View the Migrate guide between major versions

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

With webpack use resolve.mainFields to configure the module type.
Add SASS loader to support importing of SASS styles.

FormattedInput API

Prop name	Type	Default	Description
onChange	func	Required	Called upon change
onBlur	func	Noop function	Called upon blur
onMouseDown	func	Noop function	Called upon mouse down
formatter	func	Noop function	Function that formats the value on blur
editFormatter	func	Noop function	Function that formats the value on change
inputProps	object		Collection of props that are be passed to the input field
value	text, number		Input value

FormattedInputCurrency API

Prop name	Type	Default	Description
onChange	func	Required	Called upon change
onBlur	func	Noop function	Called upon blur
currency	string	undefined	Currency code to get number of decimals from
decimals	string	undefined	Number of decimals, overrides currency decimals
thousandSeparator	string	undefined	Thousand separator
decimalSeparator	string	"."	Decimal separator
selectValueOnClick	bool	false	If true, input value is selected on click

Code example

import React from 'react';
import FormattedInput, { FormatInputCurrency } from '@opuscapita/react-formatted-input';

export default class ReactView extends React.Component {
  formatter = (value) => `formatted-${value}`;

  render() {
    return (
      <React.Fragment>
      <FormattedInput
        onChange="..."
        formatter={this.formatter}
      />
      <FormattedInputCurrency
        currency="EUR"
        onChange="..."
      />
      <React.Fragment>
    );
  }
}

@opuscapita/format-utils

@infinitebrahmanuniverse/nolb-_opu @everything-registry/sub-chunk-692 @opuscapita/react-grid

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago