# react-price-animation

> A component for animating numbers and prices in React.

Latest version **1.0.9** (published 2024-11-07) · (ISC OR MIT) license · 0 weekly downloads

## Install

```sh
npm install react-price-animation
pnpm add react-price-animation
yarn add react-price-animation
bun add react-price-animation
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2024-11-07 |
| First published | 2024-04-26 |
| Weekly downloads | 0 |
| License | (ISC OR MIT) |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 93.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Tommy |
| Maintainers | gangnamssal |
| Keywords | react-count-animation, count-up-animation, price-animation, number-animation, react-price-animation |

## Links

- npm: https://www.npmjs.com/package/react-price-animation
- Repository: https://github.com/gangnamssal/react-price-animation
- Homepage: https://react-price-animation.vercel.app/?path=/docs/count--docs
- Issues: https://github.com/gangnamssal/react-price-animation/issues
- npm.io page: https://npm.io/package/react-price-animation

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^9.0.1
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@vanilla-extract/css](https://npm.io/package/@vanilla-extract/css.md) ^1.14.2
- [@vanilla-extract/dynamic](https://npm.io/package/@vanilla-extract/dynamic.md) ^2.1.0
- [@vanilla-extract/recipes](https://npm.io/package/@vanilla-extract/recipes.md) ^0.5.2

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2024-11-07
- 1.0.8 — 2024-11-07
- 1.0.7 — 2024-11-04
- 1.0.6 — 2024-05-22
- 1.0.5 — 2024-05-14
- 1.0.4 — 2024-05-13
- 1.0.3 — 2024-05-13
- 1.0.2 — 2024-04-27
- 1.0.1 — 2024-04-27
- 1.0.0 — 2024-04-27
- 0.0.8 — 2024-04-27
- 0.0.7 — 2024-04-27
- 0.0.6 — 2024-04-27
- 0.0.5 — 2024-04-26
- 0.0.4 — 2024-04-26
- … 3 more at https://npm.io/package/react-price-animation/versions

## README

# React-price-animation

은행, 이커머스 사이트 등에서 거래가 이루어질 때, 가격이나 숫자의 변동을 사용자에게 더욱 생생하게 전달하기 위해 애니메이션 효과를 적용할 수 있습니다.
<p align="center">
  <img src="https://github.com/gangnamssal/react-price-animation/assets/110574860/f90a3c65-8fb7-41d8-858a-10d4c7672dbe" width="300px">
</p>

## Install

npm

```markdown
npm install react-price-animation
```

yarn

```markdown
yarn add react-price-animation
```

pnpm

```markdown
pnpm install react-price-animation
```

## Site
https://react-price-animation.vercel.app/?path=/docs/count--docs

## Usage

React 컴포넌트에 react-price-animation를 import하여 사용합니다.

```jsx
import { Count } from 'react-price-animation';

function App() {
  return (
    <div className='App'>
      <Count number={12345} />
    </div>
  );
}

export default App;
```

## Props

- `number` : 숫자나 "123,000"과 같이 쉼표로 구분된 형식의 문자열을 입력받습니다.
- `delay` : 각 자릿수의 애니메이션 시작 시간을 나타냅니다. 기본값은 0.15입니다.
- `height` : 숫자의 높이를 지정합니다. 높이는 최소한 글자 크기만큼이어야 합니다. 기본값은 20px입니다.
- `startDirection` : 애니메이션의 시작 방향을 지정합니다. 'left'는 왼쪽에서 시작하는 것을 의미하며, 'right'는 오른쪽에서 시작하는 것을 나타냅니다. 기본값은 'right'입니다.
- `comma` : 쉼표 표시 여부를 결정합니다. 기본값은 true입니다.
- `initialAnimation` : 첫 렌더링 시 애니메이션을 보여줄지 여부를 나타냅니다. 기본값은 true입니다.
- `other` : HTMLAttributes<HTMLDivElement> 속성을 사용할 수 있습니다.

|      속성명      |   필수 여부    | 기본값 |           가능한 타입            |
| :--------------: | :------------: | :----: | :------------------------------: |
|      number      | required(필수) |   -    |        `number`,`string`         |
|      delay       |  option(선택)  |  0.15  |             `number`             |
|      height      |  option(선택)  |  20px  |             `string`             |
|  startDirection  |  option(선택)  | right  |          `left`,`right`          |
|      comma       |  option(선택)  |  true  |            `boolean`             |
| initialAnimation |  option(선택)  |  true  |            `boolean`             |
|      other       |  option(선택)  |   -    | `HTMLAttributes<HTMLDivElement>` |

## Example

- number 값이 문자열일 때

```jsx
import { Count } from 'react-price-animation';

function App() {
  return (
    <div className='App'>
      <Count number={'12,345'} />
    </div>
  );
}

export default App;
```

- 모든 props를 적용했을 때

```jsx
import { Count } from 'react-price-animation';

function App() {
  return (
    <div className='App'>
      <Count number={12345} delay={0.1} height={'15px'} startDirection={'left'} />
    </div>
  );
}

export default App;
```

- css 적용

```jsx
import { Count } from 'react-price-animation';

function App() {
  return (
    <div className='App'>
      <Count className={price} number={price?.toLocaleString('ko-KR')} delay={0.1} />
    </div>
  );
}

export default App;
```

- 이벤트 적용

```jsx
import { Count } from 'react-price-animation';

function App() {
  return (
    <div className='App'>
      <Count
        className={styles.price}
        number={price?.toLocaleString('ko-KR')}
        delay={0.1}
        onClick={() => console.log(123)}
      />
    </div>
  );
}

export default App;
```

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

---
_Source: https://npm.io/package/react-price-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._