Skip to content

Commit

Permalink
Merge pull request inorganik#171 from glennreyes/react-usage
Browse files Browse the repository at this point in the history
Adding link to @glennreyes countup react wrapper repo
  • Loading branch information
inorganik authored Jun 17, 2017
2 parents d2b43e6 + 8831ce6 commit 7934889
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ If you are using Angular, you can use the included Angular module. Use the count
An identical Angular 2 version of the directive compatible with version ^2.0.0 is also provided.
Simply import the module from `dist/` into your application module's `imports` array. See example below.

## React component
If you are using React, there is a React component wrapper [`react-countup`](https://github.com/glennreyes/react-countup) that can be used right out of the box and takes all the complexity for you. It supports all common options and features including `easing`, `separator`, `decimals`, callbacks `onStart` and `onComplete`. **[Check out the React demo](https://glennreyes.github.io/react-countup)** and see usage examples below.

## jQuery
A jQuery version is also included in case you like dollar signs.

Expand Down Expand Up @@ -133,6 +136,20 @@ export class CountingHeaderComponent {
}
```

#### React
*If you are using React*, (not required) with [`react-countup`](https://github.com/glennreyes/react-countup), just simply do:

```js
import CountUp from 'react-countup';

render(
<CountUp start={0} end={160526} />,
document.getElementById('root')
);
```

Your CountUp component will start to count up right after the component has been mounted.

#### Custom easing:

You can optionally apply your custom easing function, which will receive 4 parameters necessary to calculate a Bezier curve:
Expand Down

0 comments on commit 7934889

Please sign in to comment.