@empathyco/x-components/docs/API-reference/api/x-components.basecurrency.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseCurrency](./x-components.basecurrency.md)

## BaseCurrency variable

Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.

Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`<!-- -->). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    value: {
        type: NumberConstructor;
        required: true;
    };
    format: {
        type: StringConstructor;
    };
}, {
    currency: import("vue").ComputedRef<string>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    value: {
        type: NumberConstructor;
        required: true;
    };
    format: {
        type: StringConstructor;
    };
}>>, {}, {}>
```

## Remarks

The number of 'd', which is the maximum decimal length, MUST matches with the length of decimals provided from the adapter. Otherwise, when the component truncate the decimal part, it deletes significant digits.

Basic example:

```vue
<BaseCurrency
  :value="123456.789"
  format="i.iiii,dddd €"
/>
```
It will render: `123.456,7890 €`<!-- -->.

See docs below for more examples.