Naive Puppets Marching

    mechanical-counter
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    mechanical counter

    robinhood inspired mechanical counter
    built with react and framer-motion


    styled with prettier Github release version Commits since release npm release version

    preview

    Install

    npm i framer-motion mechanical-counter

    Usage

    import { MechanicalCounter } from "mechanical-counter";
    
    export function App() {
      return <MechanicalCounter text="1337.12" />;
    }

    Help

    The component will only animate numbers and common number separators: ,, ., and -. If you want to include text before the number, then you must include that along side the component. It's totally fine to include non-supported characters in the text you send in to the component through the "text" prop, however, they must be added as a suffix to the text.

    Here is an example of adding text before the number, as a prefix, and also including some plain text—that is "unsupported characters"—after the number, as a suffix.

    <div style={{ display: "flex", alignItems: "center" }}>
      EU€
      <MechanicalCounter text="5,407 total cost" />
    </div>

    The code above will result in the following:

    preview

    Install

    npm i mechanical-counter

    DownloadsWeekly Downloads

    25

    Version

    1.0.12

    License

    ISC

    Unpacked Size

    49.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • bitttttten