diff --git a/.eslintrc.js b/.eslintrc.js index 448b43c..8c9a111 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,4 +9,5 @@ module.exports = { version: 'detect', }, }, + ignorePatterns: ['progressiveCounter.min.js'], }; diff --git a/example/index.tsx b/example/index.tsx index 4c37685..d7377dc 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -5,16 +5,6 @@ import './style.css'; import { ProgressiveCounter } from '../.'; const App = () => { - // const [isMounted, setIsMounted] = React.useState(false); - - // React.useEffect(() => { - // setIsMounted(true); - // }, []); - - // if (!isMounted) { - // return null; - // } - return ( <> {/* prettier-ignore */} diff --git a/example/style.css b/example/style.css index 6f3e5ce..cd53ed7 100644 --- a/example/style.css +++ b/example/style.css @@ -5,6 +5,13 @@ text-align: center; } +.counter { + font-size: 40px; + font-weight: bold; + color: rebeccapurple; + text-align: center; +} + body { background-color: #000000; display: grid; diff --git a/src/index.tsx b/src/index.tsx index cd125b9..7104591 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,6 +10,7 @@ interface Props { delay?: number; className?: string; element?: string; + class?: string; } export function ProgressiveCounter({ @@ -31,60 +32,3 @@ export function ProgressiveCounter({ return React.createElement(element, { className }, count); } - -export function ProgressiveCounterJS() { - const progressiveCounter = ({ - initialValue, - duration = 1500, - decimals = 0, - delay = 5, - finalValue, - }: Props) => { - let target = finalValue; - let current = initialValue; - let currentStep = 1; - let timeoutId: any; - - const initial = - typeof initialValue === 'function' ? initialValue() : initialValue; - - const lerp = (a: number, b: number, alpha: number) => { - return a + alpha * (b - a); - }; - - const easeOutCubic = (value: number) => { - return 1 - Math.pow(1 - value, 3); - }; - - const steps = Math.max(Math.floor(duration / delay), 1); - - const setTimeoutHandler = () => { - const progress = currentStep / steps; - console.log({ progress, current }); - if (progress === 1) { - current = target; - clearTimeout(timeoutId); - } else { - current = lerp(initial, target, easeOutCubic(progress)); - currentStep = currentStep + 1; - timeoutId = setTimeout(setTimeoutHandler, delay); - } - - console.log(current); - - return current.toFixed(decimals); - }; - - timeoutId = setTimeout(setTimeoutHandler, delay); - }; - - console.log( - progressiveCounter({ initialValue: 1, finalValue: 200.98, decimals: 1 }) - ); - - // document.querySelector('.counter')?.innerText = progressiveCounter({ - // initialValue: 1, - // finalValue: 200.98, - // decimals: 1, - // }); -}