Skip to content

Comments

feat: add startValue prop to number-ticker component#428

Closed
PraveenShinde3 wants to merge 1 commit intomagicuidesign:mainfrom
PraveenShinde3:fix/426
Closed

feat: add startValue prop to number-ticker component#428
PraveenShinde3 wants to merge 1 commit intomagicuidesign:mainfrom
PraveenShinde3:fix/426

Conversation

@PraveenShinde3
Copy link

@PraveenShinde3 PraveenShinde3 commented Nov 29, 2024

Pull Request: Add startValue Prop to NumberTicker Component

This PR introduces a new startValue prop for the NumberTicker component. The startValue prop allows users to set an initial value for the number displayed by the component.

Demo video

Screen.Recording.2024-11-29.205216.mp4

Related Issue
Closes #426

@vercel
Copy link

vercel bot commented Nov 29, 2024

@PraveenShinde3 is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

@PraveenShinde3
Copy link
Author

PraveenShinde3 commented Nov 29, 2024

So far, I have only made changes to registry/default/magicui/number-ticker.tsx. Additionally, the documentation needs to be updated to include details about the new prop, and adding a demo would be beneficial. However, I am awaiting confirmation from the MagicUi team before proceeding with these additional changes.

@itsarghyadas
Copy link
Collaborator

Do you think this prop is essential to add, and why?

The main goal of a ticker number component is to display an animated number until it reaches the specified value. Adding an extra prop that doesn't make a significant difference might not be necessary, in my opinion.

@BankkRoll
Copy link
Contributor

BankkRoll commented Dec 13, 2024

Do you think this prop is essential to add, and why?

The main goal of a ticker number component is to display an animated number until it reaches the specified value. Adding an extra prop that doesn't make a significant difference might not be necessary, in my opinion.

I think it actually is based off how your using it.. If you have multiple for example a stats component and one of your numbers is high and isn't truncated to a localized format, you encounter situations where some numbers in a sequence complete their animation much earlier than others.

For example, smaller numbers will quickly finish ticking, while larger numbers will have to cycle through thousands very rapidly to catch up. This can look visually unappealing or "weird."

I have manually done this myself previously as its a more synchronized effect, making the animation feel more balanced, regardless of the values.

@itsarghyadas
Copy link
Collaborator

Thank you for the suggestion. We have merged it into this PR #578 and we are closing this PR on its behalf.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: /docs/components/number-ticker - StartValue

3 participants