react-scrolling-currency
is an open-source npm package that provides a React component for animating changing currencies and numbers with a scrolling animation. If you love the way Robinhood displays the stock price, this is the component for you.
You can install react-scrolling-currency
into your project using npm:
npm install react-scrolling-currency
Here's a basic example of how to use the ScrollingNumber
component:
import { ScrollingNumber } from 'react-scrolling-currency';
function App() {
return (
<div className="App">
<ScrollingNumber number={1234.56} isCurrency={true} locale="en-US" currencyCode="USD" />
</div>
);
}
export default App;
In this example, the ScrollingNumber
component is used to display the number 1234.56
as a currency in USD.
The ScrollingNumber
component accepts the following props:
-
number
: The number to display. This can be any number, positive or negative. -
isCurrency
(optional): A boolean that determines if the number should be displayed as a currency. Defaults to true. -
locale
(optional): The locale to use when formatting the number as a currency. Defaults to "en-US". -
currencyCode
(optional): The currency code to use when formatting the number as a currency. Defaults to "USD".
The ScrollingNumber
component can be customized in several ways:
- You can change the number to display by changing the
number
prop. - You can display the number as a plain number instead of a currency by setting the
isCurrency
prop tofalse
. - You can change the locale and currency code by changing the
locale
andcurrencyCode
props respectively.
The ScrollingNumber
component uses CSS for styling. You can customize the appearance of the component by overriding the CSS classes in your own stylesheets.
The ScrollingNumber
component uses the framer-motion
library for animations. This dependency is included in the react-scrolling-currency
package, so you don't need to install it separately.
The ScrollingNumber
component is a fun and engaging way to display numbers in your React application. With its customizable props and CSS, you can make it fit perfectly into your project. Enjoy using react-scrolling-currency
!