https://github.com/vtex-apps/formatted-price
Formatting utilities for displaying prices.
https://github.com/vtex-apps/formatted-price
hacktoberfest store-framework vtex-io
Last synced: 26 days ago
JSON representation
Formatting utilities for displaying prices.
- Host: GitHub
- URL: https://github.com/vtex-apps/formatted-price
- Owner: vtex-apps
- Created: 2019-08-27T21:03:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-11-22T00:17:48.000Z (3 months ago)
- Last Synced: 2025-11-22T02:26:40.113Z (3 months ago)
- Topics: hacktoberfest, store-framework, vtex-io
- Language: TypeScript
- Homepage:
- Size: 262 KB
- Stars: 1
- Watchers: 38
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Price
> Formatting utilities for displaying prices.
<FormattedPrice value={0} />
<FormattedPrice value={null} />
<FormattedPrice value={10} />
## Usage
To use this app, you first need to add it in your `manifest.json` file, like so
```json
{
"dependencies": {
"vtex.formatted-price": "0.x"
}
}
```
> If you are using TypeScript, you may also want to run `vtex setup` after the step above
Now you can import the component and use it
```jsx
import React from 'react'
import { FormattedPrice } from 'vtex.formatted-price'
const ProductSummary = ({ productPrice }) => {
return (
My Awesome Product
)
}
```
## Components
### FormattedPrice
Responsible for rendering and styling the value prop as a price
with the current store currency settings.
#### Props
| Prop name | Type | Required |
| --- | --- | --- |
| [`value`](#formattedprice-value) | `number` | `false` |
##### FormattedPrice value
`number | null | undefined`
Value used in the formatting.
### useFormattedPrice
`(value: number | null | undefined) => string`
Utility hook that formats the value parameter into a price string, using the
current store currency settings.
## CSS Customization
In order to apply CSS customizations in this and other blocks, follow the instructions
given in [this recipe](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization)
regarding using CSS classes for store customization.
| CSS Handle | Component |
| --- | --- |
| `price` | `FormattedPrice` |