Nucleic Phosphate Modifier

    react-animated-number

    0.4.4 • Public • Published

    react-animated-number

    npm version devDependency Status

    React component for animating numbers

    Install

    react-animated-number is available via npm and can be used with browserify or webpack.

    npm install --save react-animated-number
    

    Usage

    import AnimatedNumber from 'react-animated-number';
    ...
    ...
     
    class Demo extends Component {
     
        ...
     
        render () {
            <AnimatedNumber component="text" value={bigValue}
                style={{
                    transition: '0.8s ease-out',
                    fontSize: 48,
                    transitionProperty:
                        'background-color, color, opacity'
                }}
                frameStyle={perc => (
                    perc === 100 ? {} : {backgroundColor: '#ffeb3b'}
                )}
                duration={300}
                formatValue={n => prettyBytes(n)}/>
        }
    }

    API

    value: number

    required
    Numeric value to which to tween to


    initialValue: number

    default: 0
    Initial numeric value for the tween start


    component: any

    default: "span"
    This is similar to the react transition API. By default, renders text inside a <span>. You can pass in any valid ReactElement. Use "text" for rendering into SVG.


    formatValue: ?(n: number) => string

    A callback function that accepts a number and returns a formatted string


    duration: ?number

    default: 300
    Total duration of animation in milliseconds


    frameStyle: ?(perc: number) => Object | void,

    A callback function that accepts the percentage of completion of current animation and returns the style object to applied to the current frame


    stepPrecision: ?number

    The number of decimal places to render for intermediate values. If set to 0, rounds off the intermediate values using Math.round


    Demo

    A demo can be found here. Source code for the demo can be found here.

    License

    react-animated-number is licensed under MIT license.

    Install

    npm i react-animated-number

    DownloadsWeekly Downloads

    6,827

    Version

    0.4.4

    License

    MIT

    Last publish

    Collaborators

    • amey