almond-bongbong/react-slot-counter

🚀 Elevate Your UI with Dynamic, Eye-Catching Counters

react-slot-counter's Issues

"onlyChanged" mode

Please add the option not to scroll through the numbers that have not changed

ex. 12345 + 1 = 12346
1234 should not be animated

🐛 useMonospaceWidth

Hi @almond-bongbong !

When I use this props last number not use monospace width.

You might think that it is limited by the container, but no. The same happens with any container width.

Feature Request: also support images

Would be cool if you could also support images and not only numbers and strings to create something like this:

So that one would only need to provide the image paths:

<SlotCounter
    value={["imagePath1", "imagePath2", "imagePath3"]}
    startValue={["imagePath1", "imagePath1", "imagePath1"]}
    dummyCharacters={["imagePath1", "imagePath2", "imagePath3"]}
/>

Mode "Increase/Decrease"

Hello! Great library, I wanted to suggest adding a couple of modes, such as counter increment or decrement. Maybe it's even some kind of direction mode, depending on whether it is added to the number or vice versa?

SlotCounter don't align to center with dummyCharactorCount props

I used SlotCounter with dummyCharactorCount
but the spans are not aligned to center.

how can I handle this?

these are my code below. both code are not working at me.

<SlotCounter value="9999" dummyCharacterCount={20} />

 const counterRef = useRef<SlotCounterRef>(null);
  useEffect(() => {
    counterRef.current?.refreshStyles();
    counterRef.current?.startAnimation({
      dummyCharacterCount: 20,
    });
  }, []);
  ...
  return <SlotCounter ref={counterRef} value="9999" />

2023-11-21.3.56.52.mov

Alignment Issue With `animateUnchanged` false

Screen.Recording.2023-12-05.at.9.26.11.AM.mov

As shown in the video above there is a slight alignment issue when animateUnchanged is false

Feature Request: Different start than end value on animation

Right now you can only provide one value which is displayed at the start and at the end of the animation.

As I want to use it as a slot machine would it be possible to provide a different value at the beginning so that the user won't know what the end result will be?

Something like this:

 <SlotCounter
        startValue={123456}
        endValue={231535}
        charClassName="char"
        separatorClassName="sep"
 />

export 'SlotCounterRef' (imported as 'SlotCounterRef') was not found in 'react-slot-counter' (possible exports: default)

Getting this error. I created a new react app and simply installed this component and it's treating "SlotCounterRef" never existed?

"import SlotCounter, { SlotCounterRef } from 'react-slot-counter';" - This is from the github page example

ERROR in ./src/components/SlotMachine.js 9:30-44

export 'SlotCounterRef' (imported as 'SlotCounterRef') was not found in 'react-slot-counter' (possible exports: default)

..

That being said I only have react js + node js installed here

Cant use with React Native

i used example code on a reactnative app and get this error

This error is located at:
in span
in span
in span
in Unknown
in span
in Unknown
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in oxyapp(RootComponent), js engine: hermes
ERROR Error: Text strings must be rendered within a component.

does anyone know how to fix thanks

Any chance you can introduce a stopAnimation function?

Basically the behaviour could be that the animation is infinite until stopAnimation is called

Increase number of rotations

I need to increase the number of rotations. Is there any prop?

Infinite dummy list

Hey, I was taking a look into your lib then I thought of one suggestion, you could create an "infinite" dummy list with the real value centralized just adding the dummy list to the bottom.

What do you think?

sequentialAnimationMode?

Hi! Great library! I could just be misunderstanding the settings but wanted to mention this just incase.

My goal is essentially to start with 0 (startValue) and increment sequentially until it reaches my value of "230,436" -- but when I have these settings in my component:

<SlotCounter
    ref={counterRef}
    startValue={0}
    sequentialAnimationMode
    charClassName="actions-taken-number"
    separatorClassName="actions-taken-number"
    value="230,436"
/>

But with those settings, I don't really see any animation, I just see this extremely large number on load:

If I take out sequentialAnimationMode, so these settings in my component:

<SlotCounter
    ref={counterRef}
    startValue={0}
    charClassName="actions-taken-number"
    separatorClassName="actions-taken-number"
    value="230,436" 
/>

Then I see the animation and the value that is set when the animiation completes (instead of the incorrect massive number in the screenshot above):

Is there a way for me to to start with 0 (startValue) and increment sequentially until it reaches my value of "230,436", where "230,436" is visible at the end of the animation? Thanks!!

Sticky value

Hello, it's me again

Faced such a problem as sticking the value of the counter and sometimes (for a reason unknown to me) the numbers are located as if far from each other. I searched everything that could affect the arrangement of numbers within myself, or maybe something could arrange them in this way, but alas, without result ...

Any ideas what could be causing this?

It also happens like this

Add ability to rotate X number of times through all numbers before completion

As an alternative to slowing down the spin speed via the duration mechanic, force the counter to rotate X number of times (going through all numbers and back to 0) before landing on its final value.

Issue in autoAnimationStart

Even if we set the value of autoAnimationStart={false} , initial animation is happening on every render of the component.
I want to only animate it on click of a button.What is the solution for this?

dummyCharacterCount={1}

Hello! Long time no see 😁

I noticed a small bug related to dummyCharacterCount. When its value is 1, then the following happens: the value in the counter will first increase by 1 and then the counter will scroll through this digit. Is there a way to fix this?

Screen.Recording.2023-06-29.at.20.13.56.mov

direction: 'top-down' doesn't work with both startValue and value set

If you change the settings example/src/App.tsx, combining `direction: 'top-down' with value and StartValue - the value ends up being the startValue and not value.

Here's an example where you end up getting 321 as the final value and not 123. The behavior is correct if you remove direction: 'top-down

<div className="playground">
            <SlotCounter
              ref={counterRef1}
              value="123"
              startValue="321"
              autoAnimationStart={false}
              useMonospaceWidth
              duration={3}
              dummyCharacterCount={30}
              containerClassName="slot-counter"
            />
            <button
              className="example-button"
              onClick={() => counterRef1.current?.startAnimation()}
            >
              start animation (default)
            </button>
            <button
              className="example-button"
              onClick={() =>
                counterRef1.current?.startAnimation({
                  duration: 3,
                  dummyCharacterCount: 10,
                  direction: 'top-down',
                })
              }
            >
              start animation (with options)
</button>

Re-rendering/Re-calculating on window resize?

Hi! This works great, except that I have a situation where the counter's font size needs to get much smaller in mobile. Its fine on window refresh in a different window size, but without refresh, the counter doesn't look right after after window is resized back/forth from desktop to mobile. I can watch for resize in the component, and I've tried some things like:

• removing/re-adding the SlotMachine component when the window resizes
• switching desktop/mobile classNames for the slotMachine on resize
• putting in two different SlotMachine components with two different refs and classes, showing either one on resize

But nothing I've tried so far to change on resize seems to work and requires window refresh for the counter to look as expected again. Is there anything I can do?

Thanks!!