npm package: @growth-ui/currency-input
Description: <!-- Logo --> <p align="center">   <a href="https://react.growth-ui.com">     <img width="150px" src="https://react.growth-ui.com/images/logo.png" alt='logo' >   </a> </p>
Author: Kyuhak Yuk
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!-- Logo -->
<p align="center">
  <a href="https://react.growth-ui.com">
    <img width="150px" src="https://react.growth-ui.com/images/logo.png" alt='logo' >
  </a>
</p>

<!-- Name -->
<h1 align="center">
  <a href="https://react.growth-ui.com/">Growth UI</a>
  <br />
  <br />
  React Currency Input Field Component
</h1>

<div style='margin: 15px auto; width: fit-content;'>
  <a href="https://www.npmjs.com/package/@growth-ui/currency-input"><img src="https://badgen.net/npm/dm/@growth-ui/currency-input" alt="npm" /></a>
  <a href="https://www.npmjs.com/package/@growth-ui/currency-input"><img src="https://badgen.net/npm/v/@growth-ui/currency-input" alt="npm" /></a>
  <a href="https://www.styled-components.com/"><img src="https://badgen.net/badge/built%20with/styled%20components/db7093" alt="Built with Styled Components" /></a>
  <img src="https://badgen.net/badge/powered%20by/typescript/blue" alt="Powered by TypeScript" />
</div>

## Install

`npm install @growth-ui/currency-input`

or

`yarn add @growth-ui/currency-input`

## Usage

```js
import CurrencyInput from ' @growth-ui/currency-input';

<CurrencyInput
  defaultValue={0}
  fixed={2}
  onChange={(value, props) => console.log(value, props)}
/>;
```

## Props

| Name          | Type      | Default | Description                                                      |
| ------------- | --------- | ------- | ---------------------------------------------------------------- |
| basic         | `boolean` | `false` | An input can be just pure html input look and feel.              |
| compact       | `boolean` | `false` | An input can reduce its padding to fit into tighter spaces.      |
| decimalsLimit | `number`  | `2`     | Limit length of decimals allowed.                                |
| defaultValue  | `number`  |         | Default value.                                                   |
| error         | `boolean` |         | An Input field can show the data contains errors.                |
| fixed         | `number`  |         | Value will always have the specified length of decimals.         |
| focus         | `boolean` |         | An input field can show a user is currently interacting with it. |
| onBlur        | `func`    |         | Called on blur.                                                  |
| onChange      | `func`    |         | Called on change.                                                |
| onFocus       | `func`    |         | Called on focus.                                                 |
| placeholder   | `string`  |         | Placeholder if no value                                          |
| prefix        | `string`  |         | An input can be descriptive. e.g) $                              |
| separators    | `boolean` |         | An input can format number with commas as thousands separators.  |
| size          | `number`  |         | An input can have different sizes.                               |
| value         | `number`  |         | An input value.                                                  |

### Prefix

You can add a prefix or suffix by passing in `prefix` or `suffix`.

```js
import CurrencyInput from ' @growth-ui/currency-input';

<CurrencyInput prefix="£" value={123} />;
// £123
```

### For more examples and interactions, visit [growth-ui-react](https://react.growth-ui.com).

<br />

## Looking for UI library?

#### Check out our react ui library [Growth-UI-React][1].

#### Check out our native ui library [Growth-UI-Native][2].

<br />

## Credit

Created by [@kyuhakyuk][3].

[1]: https://react.growth-ui.com/
[2]: https://native.growth-ui.com/
[3]: https://github.com/kyuhakyuk