First Digit '1' Rendered as '0'

[DerZerstampfer]

Hey 👋

Firstly, nice work with this component; I really enjoy using it :)

However, I encountered a weird bug.

When the value starts with a 1, for example, 10232, it gets shown as 00232.
It works as expected on the initial value, and it seems to work on your example on the website.

Here is a video of it:
Video

Here is the code to reproduce it:

'use client'

import MotionNumber from 'motion-number'
import { useEffect, useState } from 'react'

export const MotionNumberBug = () => {
  const [number, setNumber] = useState(1248)

  useEffect(() => {
    const interval = setInterval(() => {
      setNumber((prevFollowers) => {
        const increment = Math.floor(Math.random() * (10000 - 1000 + 1)) + 1000
        return prevFollowers + increment
      })
    }, 2000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div>
      <p>{number.toLocaleString('en-US', { notation: 'standard' })}</p>
      <MotionNumber
        value={number}
        format={{ notation: 'standard' }}
        locales="en-US"
      />
    </div>
  )
}

I'm running the newest version (0.1.7).
All in a Next.js (14.2.5) project.

I hope this is enough information for you to reproduce it.

Please let me know if you need any additional information from me to help debug this.

Thank you!

[barvian]

Hey, thanks for the repro! This seems to be an issue with Strict Mode. I migrated the docs to Astro at some point and forgot that Astro doesn't use Strict Mode by default. Can you confirm that turning strict mode off (i.e. reactStrictMode: false in your next.config.js) fixes it? I'll look into a proper fix in the meantime.

[DerZerstampfer]

Thanks for your prompt response! I can confirm that it indeed resolves the issue. Thanks for the workaround! I'm looking forward to when you get a proper fix.

[barvian]

I just pushed a rewrite for MotionNumber that should fix this. Please let me know if you're still experiencing issues 👋