Comments (5)
@AoDev sounds like a good idea. How about customFunctionRender
receiving an extra argument to tell if it's currently being animated?
from react-number-easing.
I think it can work, I am thinking of pros and cons.
If we can provide 2 functions, then it's easier to use the component, since it would stay more "declarative style" and there would be no need to check anything.
From performance point of view (like having many animated numbers), if we can make things in a way that there is no need to check if the transition has finished then it might be a good thing. Just call the "customFinalRender" internally if it was provided, or the customRender / defaultRender.
If we provide 1 function with a parameter, then it's less props to provide to the component but I dont know if it can be optimized the same way than with 2.
from react-number-easing.
Continuing my comment above, we have different choices.
<NumberEasing
value={10}
decimals={0}
finalRender={(num) => num.toFixed(2)}
ease="quintInOut"
/>
<NumberEasing
value={10}
customRender={(num) => num.toFixed(0)}
finalRender={(num) => num.toFixed(2)}
ease="quintInOut"
/>
<NumberEasing
value={10}
customRender={(num, final) => final ? num.toFixed(2) : num.toFixed(0)}
ease="quintInOut"
/>
I guess all are fine but maybe there is one that could take advantage of the internal mechanism of the component if it knows when the final render will occur.
from react-number-easing.
hey @AoDev, thank you for detailing those options. I think I like having a single function best:
<NumberEasing
value={10}
customRender={(num, final) => final ? num.toFixed(2) : num.toFixed(0)}
ease="quintInOut"
/>
makes for an easier export of render functions. I don't think there is a performance difference between having them as a single function or separate funcitons.
What do you think? I can add the parameter.
from react-number-easing.
hello @javierbyte , I just realised I had to answer you (one year ago lol).
Yes, it's good to have a final
flag in custom render as a solution : )
from react-number-easing.
Related Issues (10)
- [Feature Request] Separators HOT 2
- class NumberEasing extends React.Component - refactoring HOT 1
- Continued support HOT 2
- Request: Add ts definitions HOT 5
- No release for the latest PR HOT 1
- If you have a lot of console.logs and the console open, the number can jump to crazy values HOT 3
- Going to different tab in Chrome causes numbers to be way off HOT 2
- Unknown prop `ease` on <span> tag HOT 2
- Accessing PropTypes via the main React package is deprecated HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-number-easing.