📈 Easily interpolate to a provided value with a simple React hook.

Overview

∿ use-smooth-count ∿

Easily interpolate to a provided value with a simple React hook.

npm install use-smooth-count or yarn add use-smooth-count

Demo
Example (the banner)

Features

  • 📦 Tiny: use-smooth-count is <10kb unpacked, and even less when minified
  • 👨‍💻 Easy to use, guaranteeing seamless integration into your website
  • ⌨️ Strongly typed: use-smooth-count uses TypeScript to ensure good practices, and eliminate any sneaky bugs

Usage

useSmoothCount requires 3 parameters:

  • a ref (to the element that holds the number)
  • a target (the number to reach)
  • a duration (how long it takes to reach that number)

There are many other optional parameters, such as curve and startAt. Detailed explanations are provided via JSDoc in index.ts

Example:

import { useSmoothCount } from "use-smooth-count";

const Element = () => {
    const ref = useRef(null);
    const count = useSmoothCount({ ref: ref, target: 183, duration: 3, curve: [0, 0.99, 0.01, 1] });

    return <div ref={ref} />;
};

The counter starts automatically unless you set preventStart to true, in which case you can manually call count.start() whenever you'd like.

Other working examples can be found in the example folder.

Things to Note

Certain bezier curves will not work, because at the moment the x-values of the coordinates are not taken into account for the path. This is due to the setInterval time being linear, and me being too lazy to figure out the math involved. If you know how to solve this, feel free to pull request.

There will probably be bugs. If you encounter one, please create an issue that includes the following information:

  • The issue itself
  • The expected behavior
  • The resulted behavior
  • How to reproduce (along with a direct code snippet that's producing it)

Certain logic/syntax may be subject to change. In the rare case that I need to rework something and cannot use the current syntax, I will try to find a way to keep the old method(s) in while the new ones are also introduced, as to not break any code that uses this package. If not, I'll try to let people know before updating it 👍

Other

As always, feel free to star this repo if you find it useful, as that helps out a ton and means a lot. Happy developing :)

You might also like...
A simple to-do list application developed with React, Chakra UI, React icons
A simple to-do list application developed with React, Chakra UI, React icons

React todo list Um aplicativo de lista de tarefas simples desenvolvido com React, Chakra UI, React icons Live Demo on Vercel 🚀 Getting Started Clone

React Package Starter - a simple and slightly opinionated starter kit for developing and publishing React packages

React Package Starter This is a simple and slightly opinionated starter kit for developing and publishing React packages. It comes with a several pre-

Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes
Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes

This is beta. Official release coming soon Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting,

A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets
👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

This is a very simple boilerplate made with CRA, React Router, Styled Components and Storybook.

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Let Me React - A Simple ReactJS Boilerplate
Let Me React - A Simple ReactJS Boilerplate

Write your React App easily with Let Me React! This is similar to create-react-app but LMR will comes with useful packages like react-router-dom,Axios, SweetAlert2 pre-configured so that you can dive into writing your code without having to worry about setting up the project.

Owner
Conrad Crawford
0010001 • fullstack typescript engineer • WWDC '22 scholar
Conrad Crawford
Lazerpay-react - Lazerpay SDK allows you accept payments easily in your react application

Lazerpay Official react sdk Lazerpay SDK allows you accept payments easily in yo

LazerPay 18 Nov 20, 2022
Bash-prompt-generator - Easily customize bash prompt PS1 colors, written with React

Bash prompt generator This is a web app for helping you customize the colors in

Linmiao Xu 9 Nov 3, 2022
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

Elrond Network 4 Feb 6, 2022
CLI based on Vite to generate your project easily

CLI based on Vite to generate your project easily

Phong Nguyen 6 Jul 5, 2022
This website provides users the ability to create their own memes easily

meme-generator This website provides users the ability to create their own memes easily. Features : Users can generate random meme images. Users can w

Emad Hussien 4 Oct 5, 2022
The complete type-safe MUI and react-hook-form combo and beyond with simple API

The complete type-safe MUI and react-hook-form combo and beyond with simple API

Adiat Hasan 42 Nov 1, 2022
A React hook to fetch ENS records from a domain.

use-ens A React hook to fetch ENS records from a domain. Install pnpm i use-ens Example import React, { useEffect } from 'react' import { useWeb3React

v 1 r t l 17 Jul 31, 2022
A react hook for uploading large files that need chunking.

React Chunked Uploader A react hook for uploading large files that need chunking (for example for uploading to Cloudinary). It uses axios and provides

Raffi Dilanchian 7 Nov 21, 2022
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Albenis Kërqeli 30 Sep 3, 2022
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022