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

• GitHub Repository
• npm Package
• React Components

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. |