MotionNumber · MotionText

चाकांसारखी घरंगळणारी स्थाने असलेली संख्या, दिसणाऱ्या किंवा अदृश्य होणाऱ्या स्थानांसह.

वेबReact Nativeसंख्या आणि मजकूर

वापरून पाहा

उदाहरण तयार होत आहे…

JavaScript बंद आहे. खालील कोड हेच संपूर्ण उदाहरण आहे.

App.jsx

import { useState } from 'react';
import { MotionNumber, MotionText, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const formats = {
  plain: {},
  currency: { intl: true, locale: 'en-US', format: { style: 'currency', currency: 'USD' } },
  // Basis points: every preset and every ±1 step shows a different percentage.
  percent: { format: (value) => `${(value / 100).toFixed(2)}%` },
};

const presets = [9, 10, 999, 1000, 12480, 98765];

export default function App({
  mode = 'roll',
  direction = 'auto',
  format = 'currency',
  stagger = 40,
  spring = 'default',
}) {
  const [value, setValue] = useState(1000);
  const [trend, setTrend] = useState('Ready');

  const change = (next) => {
    setTrend(next > value ? 'Rising' : next < value ? 'Falling' : 'Same value');
    setValue(next);
  };

  return (
    <div className="lab">
      <MotionNumber
        className="value"
        value={value}
        mode={mode}
        direction={direction}
        stagger={stagger}
        transition={motionTokens.spring[spring]}
        {...formats[format]}
      />
      <MotionText className="trend">{trend}</MotionText>
      <div className="presets">
        {presets.map((preset) => (
          <button key={preset} onClick={() => change(preset)}>
            {preset}
          </button>
        ))}
      </div>
      <div className="steps">
        <button onClick={() => change(value - 1)}>−1</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
      </div>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
}

.value {
  font:
    800 clamp(44px, 11vw, 80px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.trend {
  padding: 4px 12px;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 650;
  font-size: 14px;
}

.presets,
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.presets button,
.steps button {
  min-width: 56px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
  cursor: pointer;
}

.steps button {
  background: #f4faf7;
}

.presets button:hover,
.steps button:hover {
  border-color: #176b52;
}

सर्वात छोटा वापर

Total.jsx

<MotionNumber value={count} />
<MotionNumber value={total} mode="roll" intl locale="en-US"
  format={{ style: 'currency', currency: 'USD' }} />
<MotionText>{status}</MotionText>

तुमच्यासाठी काय हाताळतो

हातचे: 999 → 1,000 प्रत्येक बदललेले स्थान ओडोमीटरप्रमाणे एकाच दिशेने घरंगळवते.
दिसणारी किंवा अदृश्य होणारी स्थाने अचानक न येता स्वतःच्या स्तंभात घरंगळत येतात किंवा जातात.
विभाजक, चिन्हे आणि चलन चिन्हे ज्या स्थानाचे आहेत त्यासोबत फिकटपणे येतात आणि जातात.
उरलेली स्थाने घरंगळतानाच नवीन जागी सरकतात, त्यामुळे संख्या कधीही फुटत नाही.
मोशनच्या मध्येच आलेले नवीन मूल्य स्क्रीनवर दिसणाऱ्यापासून नेमके पुढे जाते.
फॉरमॅटिंगला Intl कधीही लागत नाही: मजकूर किंवा format फंक्शन द्या, किंवा intl ने निवडा.

यासाठी वापरा

वस्तू जोडल्यावर बदलणारी कार्टची एकूण रक्कम.
थेट काउंटर किंवा गुण.
काही सेकंदांनी रिफ्रेश होणारा डॅशबोर्ड आकडा.

Props

`MotionNumber`

Prop	प्रकार	डीफॉल्ट	वर्णन
`value`	`number \| bigint \| string`	`—`आवश्यक	संख्या, किंवा कॉलरने फॉरमॅट केलेला संख्यात्मक मजकूर.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` प्रत्येक बदललेले स्थान एक पाऊल हलवतो; `roll` मधल्या अंकांमधून जातो.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` आकार बदलाचे अनुसरण करतो, त्यामुळे हातचे एका दिशेने घरंगळतात; `digit` प्रत्येक स्थानाची स्वतंत्र तुलना करतो.
`stagger`	`number`	`45`	बदललेल्या स्थानांमधील मिलिसेकंद, एककांपासून बाहेरच्या दिशेने. संपूर्ण लाट मर्यादित आहे.
`format`	`(value) => string \| Intl.NumberFormatOptions`		दाखवायचा मजकूर परत करणारे फंक्शन, किंवा `Intl.NumberFormat` पर्याय (`intl` सह).
`intl`	`boolean`	`false`	अंगभूत `Intl.NumberFormat` वापरा. कोणत्याही रनटाइमला `Intl` लागू नये म्हणून डीफॉल्टनुसार बंद.
`locale`	`string \| string[]`		`intl` साठी locale.
`prefix`	`string`		संख्येपूर्वीचा मजकूर.
`suffix`	`string`		संख्येनंतरचा मजकूर.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onMotionComplete`	`(value) => void`		स्थाने स्थिरावल्यावर मूल्यासह चालते.

`MotionText`

Prop	प्रकार	डीफॉल्ट	वर्णन
`children`	`ReactNode`		दाखवायचा मजकूर.
`as`	`element`	`'span'`	रेंडर करायचा एलिमेंट.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onMotionComplete`	`(text) => void`		मोशन स्थिरावल्यावर चालते.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

वेबवर प्रत्येक स्थान Web Animations API चालवत असलेला glyph चा छोटा ढीग आहे, आणि मजकूर निवडता येण्याजोगा राहतो. MotionText कोणताही मजकूर ॲनिमेट करतो: संख्यात्मक मजकूर स्थानानुसार घरंगळतो, इतर मजकूर बदलला जातो.

React Native वर संख्या लेआउट, निवड आणि सुलभतेसाठी, गुंडाळणे आणि numberOfLines सह, खरा Text राहते; glyph नेटिव्ह driver वर हलतात.