react-native-countup

React Native Countup Component

Installation

Install via npm:

npm install react-native-countup-component --save

Or 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 |

Explanation:

1. TypeScript Types: Props are annotated with TypeScript types (StyleProp<ViewStyle>, StyleProp<TextStyle>, etc.) to indicate the expected structure and types.

2. Optional Props: Props like id, onFinish, onChange, and onPress are marked as optional (undefined in TypeScript) if not always required.

3. Default Values: Default values are specified for each prop where applicable, providing clarity on what values are used if not provided.

4. 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.