Hookify react-countup #515
Conversation
…h it to use `useCountUp`.
… -- the component initialized immediately and set "0" as the value, and the hook delayed initialization and returned "" as the value. This breaks backwards compatibility by setting both to "0", though it may need to be re-thought.
# Conflicts: # src/CountUp.tsx # src/useCountUp.ts
…JS.Timeout in node, or number in the browser.
# Conflicts: # src/CountUp.tsx
|
Updated with changes from #514 These changes can be tested here: https://www.npmjs.com/package/@johnrom/react-countup/v/5.0.0-johnrom2 |
# Conflicts: # babel.config.json # src/CountUp.tsx # src/common.ts # src/useCountUp.ts
|
@johnrom i'm okay with this PR. Could you please resolve conflicts? |
|
I'll try and take a look next week. |
# Conflicts: # package.json # src/CountUp.tsx # src/common.ts # src/useCountUp.ts
|
@mmarkelov your changes since I made this PR were pretty much the opposite of mine. however, I think I was able to resolve all of the conflicts successfully. |
src/useCountUp.ts
Outdated
| }; | ||
|
|
||
| const useCountUp = (props: useCountUpProps) => { | ||
| const parsedProps = { ...defaults, ...props }; | ||
| const { ref } = parsedProps; | ||
| const config = useMemo(() => ({ ...DEFAULTS, ...props }), [props]); |
There was a problem hiding this comment.
I think that we can use destructuring here:
const { ref, startOnMount, enableReinitialize, delay, onStart, onEnd, onPauseResume, onReset, onUpdate, ...countUpProps } = useMemo(() => ({ ...DEFAULTS, ...props }), [props]);
...
const createInstance = useEventCallback(() => {
return createCountUpInstance(
typeof ref === 'string' ? ref : ref.current,
countUpProps
)
});
|
@johnrom, thanks a lot for your work! i just left one comment to fix and we will ready to merge it. |
|
I have made the requested change. I also noticed some rules of hooks errors and opened a new PR initializing eslint, and fixing all eslint issues using standard eslint + prettier practices. |
This reimplements react-countup as a hook first, with a lightweight component wrapper. It cuts the codebase in almost half.
This PR is based off of #514. so that should be merged first. There should be no breaking changes, but I'd still recommend both PRs use a major version bump.