@russell0430/react-scroll-number v0.0.3
scroll-number
the component works for only one digit number, go for scroll-number-group if you need multi-digit number
there are 3 modes for Component ScrollNumber
- UnControl
- Control
- Scroll
| property | required | type | desc |
|---|---|---|---|
| initialValue | false ( 0 by default) | single-digit number | the number show at the start |
| animtionConfig | false (there is a default config) | part of CSSProperty | the config of the aniamtion |
| onAnimationEnd | false (VoidFunction by default) | () => void | call every single animation end |
| onAnimationAllEnd | false (VoidFunction by default) | () => void | call All animation end |
| height | false (30 by default) | number or string | height of the component |
| background & Color | false | CSSProperty | css property |
UnControl
| property | required | type | desc |
|---|---|---|---|
| direction | false ("down" by default) | "up" or "down" | scroll direction |
given a value, the component will scroll to the value when the value from the props changes, the number will scroll to the new one automatically
Scroll
the component will scroll in a loop until the mode changed
when the mode changes to UnControl with the value provided, the number will scroll to the value automatically
Control
you can control the value showed in the component by youself
you can control the number by ref mounted in the component by calling the function ref.current?.togglePrev() and ref.current?.toggleNext()
scroll-number-group
there are many modes for scroll-number-group
- Control
- ScrollByDigit
- ScrollDirectly
| property | required | type | desc |
|---|---|---|---|
| digitsNumber | true | integer | the digits for the number |
| duration | false (1000 by default) | number | the duration of animation |
Control
you can control the mult-digit value showed in the component by youself
you can control the number by ref mounted in the component by calling the function ref.current?.togglePrev() and ref.current?.toggleNext()
(same as scroll-number)
ScrollByDigit
every digit scroll to the target one By one, | property | required | type | desc | | -- | -- | -- | -- | | value | true | integer| the number show up| | delay | false ( 0 by default )| number | duration to delay for the first digit|
ScrollDirectly
every digit scroll to the target simultaneously | property | required | type | desc | | -- | -- | -- | -- | | value | true | integer| the number show up|