/react-countTo

A React component that will count up (or down) to a target number with a specified cubic-bezier timing function in a sepecified amount of time.

Primary LanguageJavaScript

React countTo Compnent

react-countTo is a React component that will count up (or down) to a target number with a specified cubic-bezier timing function in a sepecified amount of time.

This was inspired by jQuery countTo plugin by @mhuggins.

Notable difference is that there are no functions to pause/stop/play the counter. This is because the design is meant to work with CSS easing functions. A duration in milliseconds is supplied as well as the x2, y2 and x3, y3 of the cubic-bezier easing function.

Demo

Requires ES6 compatible browser like Firefox 45+

https://noitidart.github.io/react-countTo/demo/demo.htm

Links

Requirements

  • v15.1.0 of react.js or react-with-addons.js
    • Respective react-dom.js
  • I did this in ES6 with Mozilla Firefox as a test browser, so it may need some downgrading if intended use is in a non-ES6 compatible browser
  • Note I have not tested this in version of React less than v15.1.0. It will probably work.

Usage

There is one approaches to using this component: through props set on the component.

API

props

Name Type Default Description
mountval Integer 0 The value to be when mounted. If it matches the end value on mount, then no transition will take place.
bezier Array or Enum ease Enum of strings: linear, ease, ease-in, ease-out, ease-in-out. Or supply an array, this is the same way you provide a CSS cubic-bezier. Provide the 4 inner coordinate components. You can use cubic-bezier.com to help generate curves.
duration Integer Number of milliseconds the transition should take
end Integer The number to end the transition at. If the current value is same as the end, then no transition will take place.