
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
@bolttech/atoms-price
Advanced tools
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
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.
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.
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;
The Price component accepts the following props:
Prop | Type | Description |
---|---|---|
id | string | The ID attribute for the component. |
dataTestId | string | The data-testid attribute for testing purposes. |
value | string | The current numerical value to be displayed. |
prevValue | string | The previous numerical value to calculate and render transitions. |
currency | string | The currency symbol to display alongside the value. |
currencyPosition | string | The position of the currency symbol ('left' or 'right' ). |
size | string | The size of the component ('small' , 'medium' , or 'large' ). |
variant | string | The variant of the component ('base' or 'alternate' ). |
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.
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
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
We found that @bolttech/atoms-price demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.