react-number-easing icon indicating copy to clipboard operation
react-number-easing copied to clipboard

Request: Add ts definitions

Open maxwellfortney opened this issue 3 years ago • 4 comments

maxwellfortney avatar Apr 12 '21 03:04 maxwellfortney

I was having problems with webpack adding the module to my ts declarations, so I just did this real quick.

image

maxwellfortney avatar Apr 12 '21 03:04 maxwellfortney

This is how I added missing types to project:

// tsconfig.json
{
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
}
// types/react-number-easing/index.d.ts
declare module 'react-number-easing' {
  import * as React from "react"

  // Following doesn't work without installling @types/eases
  // import type TEases from 'eases'
  // type TEaseTypes = keyof typeof TEases

  type TEaseTypes = 'backInOut' | 'backIn' | 'backOut' | 'bounceInOut' | 'bounceIn' | 'bounceOut' | 'circInOut' | 'circIn' | 'circOut' | 'cubicInOut' | 'cubicIn' | 'cubicOut' | 'elasticInOut' | 'elasticIn' | 'elasticOut' | 'expoInOut' | 'expoIn' | 'expoOut' | 'linear' | 'quadInOut' | 'quadIn' | 'quadOut' | 'quartInOut' | 'quartIn' | 'quartOut' | 'quintInOut' | 'quintIn' | 'quintOut' | 'sineInOut' | 'sineIn' | 'sineOut'

  interface NumberEasingProps {
    /**
     * The value that you want to display at the end of the animation. This is the target value.
     */
    value: number,
    /**
     * How fast do you want to finish the animation?
     * @default 500
     */
    speed?: number,
    /**
     * The easing equation for the animation.
     * @default 'quintInOut'
     */
    ease?: TEaseTypes,
    /**
     * Decimals number
     * @default 0
     */
    decimals?: number,
    /**
     * Function that replaces the default `Number(value).toString(decimals)` render function.
     * @default undefined
     */
    customFunctionRender?: (value: number, decimals: number) => string,
  }

  const NumberEasing: React.FC<NumberEasingProps>

  export = NumberEasing
}

piotr-cz avatar Feb 16 '22 14:02 piotr-cz

@piotr-cz can I add those definitions to the project? if you like to open a PR I'll merge but I can also copy them add you to the changelog notes :) thank you!

javierbyte avatar Feb 20 '22 17:02 javierbyte

@javierbyte Done @maxwellfortney Please check #19 if you can.

piotr-cz avatar Feb 21 '22 13:02 piotr-cz

2 years later I still find myself needing number easing, so i've gone ahead and released my own TS version, with some other small changes

https://www.npmjs.com/package/react-ts-number-easing https://github.com/maxwellfortney/react-ts-number-easing

mPaella avatar May 05 '23 15:05 mPaella