beekai-oss / react-flip-numbers Goto Github PK

Would be sweet if you could add a typings file for those of us using TypeScript.

This would probably suffice:

declare module 'react-flip-numbers' {
  import React from 'react';

  export interface FlipNumbersProps {
    background?: string;
    color: string;
    delay?: number;
    duration?: number;
    height: number;
    nonNumberStyles?: React.CSSProperties;
    numbers: string;
    numberStyles?: React.CSSProperties;
    perspective?: number;
    play: boolean;
    width: number;
  }

  export default class FlipNumbers extends React.Component<FlipNumbersProps> {}
}

You will probably also have to include @types/react and @types/react-dom as dev dependencies.

Describe the bug
Due to the zoom that is proceeded by the transform: translateZ() CSS property, the fonts of the numbers appear a bit blurry.

To Reproduce
Example Code

<FlipNumbers
          height={30}
          width={18}
          play
          duration={2}
          numbers={props.year}
        />
<div>This font is sharp</div>

Expected behavior
The font appearance should be as sharp as other elements that are not translated.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Firefox 85

Possible Solution
https://stackoverflow.com/a/37015409/1205127

I'm using Primereact, node 6.9.0 in a react+redux web application.
I installed the library and just by adding the FlipNumbers tag, it shows this error:

TypeError: useRef$1 is not a function
Animate
node_modules/react-simple-animate/dist/index.js:84
81 | const { useEffect: useEffect$1, useState: useState$1, useRef: useRef$1, useContext } = React;
82 | function Animate(props) {
83 | const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = 0.3, easeType = 'linear', sequenceId, sequenceIndex, } = props;

84 | const onCompleteTimeRef = useRef$1(null);
85 | const [style, setStyle] = useState$1(start || {});
86 | const { register, animationStates = {} } = useContext(AnimateContext);
87 | const id = getSequenceId(sequenceIndex, sequenceId);

To Reproduce
Steps to reproduce the behavior:

1. add the to a working page
2. open the page
3. See error

Expected behavior
to see the example numbers 3D animation

Screenshots

Desktop (please complete the following information):

• OS: Linux ubuntu 16.4
• Browsers:
  Chrome, Version 70.0.3538.77 (Official Build) (64-bit)
  Firefox 68.0 (64-bit)

Additional context
This is the project dependencies:

"dependencies": {
"@axetroy/react-download": "^1.1.1",
"ajv": "^6.10.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.4.0",
"classnames": "^2.2.6",
"cross-fetch": "^2.2.2",
"fast-deep-equal": "^2.0.1",
"font-awesome": "^4.7.0",
"fullcalendar": "^3.1.0",
"growl": "^1.10.5",
"history": "^4.7.2",
"i18next": "^11.3.6",
"i18next-browser-languagedetector": "^2.2.1",
"i18next-locize-backend": "^1.6.0",
"jquery": "^3.4.1",
"locize-editor": "^1.5.1",
"mapbox-gl": "^0.46.0",
"moment": "^2.24.0",
"node-sass-chokidar": "^1.3.4",
"npm-run-all": "^4.1.3",
"primeicons": "^1.0.0-beta.10",
"primereact": "^2.0.0-beta.1",
"quill": "^1.3.1",
"react": "^16.4.1",
"react-burger-menu": "^2.5.2",
"react-csv": "^1.0.14",
"react-dom": "^16.4.1",
"react-flip-numbers": "^3.0.4",
"react-google-maps": "^9.4.5",
"react-i18next": "^7.8.1",
"react-mapbox-gl": "^3.8.0",
"react-native": "^0.60.4",
"react-native-maps": "^0.21.0",
"react-proxy": "^1.1.4",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-scrollable-anchor": "^0.6.1",
"react-simple-maps": "^0.12.1",
"react-superagent": "^1.1.1",
"react-table": "^6.8.6",
"react-transition-group": "^2.4.0",
"recompose": "^0.27.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"superagent": "^3.8.3",
"superagent-promise": "^1.1.0",
"topojson-client": "^3.0.0"
}

Hi! Im trying to send in a dateTime string to the numbers prop but it does not convert it properly? Or am I doing something wrong.

return <FlipNumbers width={50} height={50} color="red" background="white" play numbers={${timeRemaining}} />;

timeRemainingbeing the dateTime string. Like this format 2021-03-10T12:00:00 for example.

Hi, first of all, this package is awesome! Good job! I'd like a feature where the changed digits are highlighted based on the previous value. Say for example, if the current value is lesser than the previous one, highlight the specific/at least all the digits in red color, and similarly, if the current value is higher than the previous one, highlight the specific/at least all the digits in green color. Is it possible already? If not, can you suggest a solution to achieve that? Thanks.

i have tried to replicate the shown style but i was not able to can u please provide the sample code for that??

First of all thank you for the amazing library i am using it on my new stocks website and the effects look pretty lit.

Although i can't find out how to achieve the same styling as shown on your read me :)

Describe the bug
numberStyles and nonNumberStyle are not applied since the types description has an incorrect spelling

To Reproduce
Steps to reproduce the behavior:

export interface FlipNumbersProps {
    background?: string;
    color: string;
    delay?: number;
    duration?: number;
    height: number;
    nonNumberStyles?: React.CSSProperties;
    numbers: string;
    numberStyles?: React.CSSProperties;
    perspective?: number;
    play: boolean;
    width: number;
  }

Expected behavior
nonNumberStyles should be nonNumberStyle and numberStyles should be numberStyle

export interface FlipNumbersProps {
    background?: string;
    color: string;
    delay?: number;
    duration?: number;
    height: number;
    nonNumberStyle?: React.CSSProperties;
    numbers: string;
    numberStyle?: React.CSSProperties;
    perspective?: number;
    play: boolean;
    width: number;
  }

Desktop (please complete the following information):

• OS: last mac version
• Browser chrome

Describe the bug
If you apply a text color between transitions, the color only applies to the element which transitions, and not the static element.
Say you have 10 and want to increment to 11, before you increment, the text color is white.
Then when you increment to 11, and you have set the color to be green, or red, only the numer that transitioned (from 0 to 1) will have the new applied text color.

Expected behavior
Expected behaviour is to have all number elements be the same numberStyle

Screenshots
Before Transition:

After Transition:

Here's my code for the example in the screenshot:

const Points = ({id}) => {
    const card = useRecoilValue(cardItemState(id));

    const pointStyle = {
        color: ["#f10033", "#fff", "#28c120"][card.vote + 1]
    }

    return (
        <Styled.Points>
            <FlipNumbers numberStyle={pointStyle} height={28} width={14} color="" numbers={card.points.toString()} play />
        </Styled.Points>
    );
}

Desktop:

• OS: Window
• Browser: Chrome
• Version: 85.0.4183.102 (Official Build) (64-bit)

At times it is breaking, sometimes animation goes from top to bottom and vise versa. How can i make it goe one way only to bottom only?

I installed and used it according to the document in my react project, I even changed the colors, but the numbers are not shown!(react version: 17.0.2)