React Native Countup Component
Install via npm:
npm install react-native-countup-component --saveOr using yarn:
yarn add react-native-countup-component --save| Name | Description | Type | Default Value |
|---|---|---|---|
| id | Counter id, used to determine reset behavior | string | undefined | undefined |
| style | Custom styles for the component | StyleProp | {} |
| digitStyle | Style for the digits | StyleProp | {backgroundColor: '#FFFFFF'} |
| digitTxtStyle | Style for the digit text | StyleProp | {color: '#000'} |
| timeLabelStyle | Style for the time label | StyleProp | {color: '#000'} |
| separatorStyle | Style for the separator | StyleProp | {color: '#000'} |
| size | Size of the countup component | number | 15 |
| current | Initial count in seconds | number | 0 |
| max | Maximum count in seconds | number | 0 |
| onFinish | Function to call when count reaches max | (() => void) | undefined | undefined |
| onChange | Function to call when count changes | ((count: number) => void) | undefined | undefined |
| onPress | Function to call when component is pressed | (() => void) | undefined | undefined |
| timeToShow | Array specifying which digits to display | string[] | ['D', 'H', 'M', 'S'] |
| timeLabels | Labels for each time unit | { d?: string, h?: string, m?: string, s?: string } | { d: 'Days', h: 'Hours', m: 'Minutes', s: 'Seconds' } |
| showSeparator | Whether to display separators between digits | boolean | false |
| running | Controls whether the component is running | boolean | true |
-
TypeScript Types: Props are annotated with TypeScript types (
StyleProp<ViewStyle>,StyleProp<TextStyle>, etc.) to indicate the expected structure and types. -
Optional Props: Props like
id,onFinish,onChange, andonPressare marked as optional (undefinedin TypeScript) if not always required. -
Default Values: Default values are specified for each prop where applicable, providing clarity on what values are used if not provided.
-
Enhanced Descriptions: Descriptions are concise yet clear, ensuring developers understand the purpose and usage of each prop.
This TypeScript-enhanced README will help developers integrate and use react-native-countup effectively in their TypeScript projects, ensuring type safety and clarity in prop usage.