You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm wondering what is the right way to define FormatNumberOptions that depends on formatted value. Now I'm using a function that takes number value and returns FormatNumberOptions object depends on this value and defined format, and it basically has a logic like this:
It works more or less ok, but it feels like an overkill and I assume it might cause some performance degradation in comparison of using one format for all the values (correct me if i'm wrong but it seems that react will recreate component in this case?), so i'd like to know if there is a better way to do this?
And when I use this setup with https://github.com/barvian/number-flow library, it breaks animation on thresholds like when value changes from 1000 to 1100, most probably because format changes and react recreates and remounts component instead of rerendering it. FWIW, not exactly the same (there is another reason of remount), but kind of related discussion is here: barvian/number-flow#112.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
I'm wondering what is the right way to define
FormatNumberOptionsthat depends on formatted value. Now I'm using a function that takes numbervalueand returnsFormatNumberOptionsobject depends on this value and defined format, and it basically has a logic like this:... else if (absValue > 10 && absValue <= 1_000) { if (defaultOpts.format === 'compactLong') { defaultOpts.minimumFractionDigits = 0; defaultOpts.maximumFractionDigits = 1; } if (defaultOpts.format === 'precision') { defaultOpts.maximumFractionDigits = 2; } } else if (absValue > 1_000 && absValue <= 1_000_000) { if (defaultOpts.format === 'compactLong') { defaultOpts.minimumFractionDigits = 1; defaultOpts.maximumFractionDigits = 1; } if (defaultOpts.format === 'precision') { defaultOpts.maximumFractionDigits = 0; } } else ...And my IntlConfig has
formatsare:It works more or less ok, but it feels like an overkill and I assume it might cause some performance degradation in comparison of using one format for all the values (correct me if i'm wrong but it seems that react will recreate component in this case?), so i'd like to know if there is a better way to do this?
And when I use this setup with https://github.com/barvian/number-flow library, it breaks animation on thresholds like when value changes from 1000 to 1100, most probably because format changes and react recreates and remounts component instead of rerendering it. FWIW, not exactly the same (there is another reason of remount), but kind of related discussion is here: barvian/number-flow#112.
All reactions