Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@bolttech/atoms-price

Package Overview
Dependencies
Maintainers
8
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bolttech/atoms-price

The **Price** component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance th

latest
npmnpm
Version
0.17.1
Version published
Maintainers
8
Created
Source

Price Component README

The Price component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance the visual representation of numerical values in various contexts.

Table of Contents

  • Installation
  • Usage
  • Props
  • Example
  • Contributing

Installation

To use the Price component in your React application, you need to follow these steps:

  • Install the necessary dependencies:

    npm install @bolttech/frontend-foundations @bolttech/atoms-price
    
  • Copy the atoms-price.type.ts and atoms-price.style.ts files along with the Price component definition into your project.

  • You can now use the Price component in your React application.

Usage

The Price component is used to display a numerical value along with animated transitions for value updates. It supports various customization options such as specifying the currency symbol, its position, size, and variant.

To use the component, import it and include it in your JSX:

import React from 'react';
import {Price} from '@bolttech/atoms-price';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Price
        value="1234.56"
        prevValue="1234.00"
        currency="$"
        currencyPosition="left"
        size="medium"
        variant="base"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Price component accepts the following props:

PropTypeDescription
idstringThe ID attribute for the component.
dataTestIdstringThe data-testid attribute for testing purposes.
valuestringThe current numerical value to be displayed.
prevValuestringThe previous numerical value to calculate and render transitions.
currencystringThe currency symbol to display alongside the value.
currencyPositionstringThe position of the currency symbol ('left' or 'right').
sizestringThe size of the component ('small', 'medium', or 'large').
variantstringThe variant of the component ('base' or 'alternate').

Example

Here's an example of using the Price component:

<Price
  value="99.99"
  prevValue="89.99"
  currency="€"
  currencyPosition="right"
  size="large"
  variant="alternate"
/>

This will render a Price component with the value "99.99", a previous value of "89.99", a euro (€) currency symbol on the right, a large size, and using the alternate variant.

Contributing

Contributions to the Price component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.

FAQs

Package last updated on 08 Apr 2025

Did you know?

Socket

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.

Install

Related posts