Skip to content

Commit

Permalink
docs: update README.md to reflect the changes [skip ci]
Browse files Browse the repository at this point in the history
  • Loading branch information
@sLeeNguyen
sLeeNguyen committed Nov 30, 2023
1 parent 0adb32b commit 533cbe1
Showing 1 changed file with 16 additions and 15 deletions.
31 changes: 16 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,22 @@ yarn add @leenguyen/react-flip-clock-countdown

The <code>FlipClockCountdown</code> has all properties of `div` and additional props below

| Name | Type | Required | Default | Description |
| :---------------------------------------- | :---------------------------------------: | :------: | :--------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------- |
| [**to**](#to) | <code>Date&#124;string&#124;number</code> | yes | | <code>Date</code> or timestamp in the future. |
| [~~**containerProps**~~](#containerprops) | <code>object</code> | no | <code>undefined</code> | Props apply to the flip clock container. This prop is deprecated, you should apply directly to the <code>FlipClockCountdown</code> component. |
| [**onComplete**](#oncomplete) | <code>func</code> | no | | Callback when countdown ends<br/> **Signature**:<br/>`function() => void` |
| [**onTick**](#ontick) | <code>func</code> | no | | Callback on every interval tick<br /> **Signature**:<br/>`function({ timeDelta, completed }) => void` |
| **renderMap** | <code>`Array<boolean>`</code> | no | <code>[true, true, true, true]</code> | Each element represents the render state of each section (day, hour, minute, second). If `true` section will be rendered, `false` otherwise. |
| **labels** | <code>`Array<string>`</code> | no | <code>['Days', 'Hours', 'Minutes', 'Seconds']</code> | Custom array of labels used to represent information for each section (day, hour, minute, second). |
| **showLabels** | <code>boolean</code> | no | <code>true</code> | Set it to `false` if you don't want to show the labels. |
| **showSeparators** | <code>boolean</code> | no | <code>true</code> | Set it to `false` if you don't want to show the separators (colon) between time unit. |
| **labelStyle** | <code>React.CSSProperties</code> | no | <code>undefined</code> | The styles apply to labels `font-size`, `color`, `width`, `height`, etc. |
| **digitBlockStyle** | <code>React.CSSProperties</code> | no | <code>undefined</code> | The styles apply to digit blocks like `font-size`, `color`, `width`, `height`, etc. |
| **separatorStyle** | <code>object</code> | no | <code>undefined</code> | The styles apply to separator (colon), includes `size` and `color`. |
| **dividerStyle** | <code>object</code> | no | <code>undefined</code> | The style will be applied to divider, includes `color` and `height`. |
| **duration** | <code>number</code> | no | <code>0.7</code> | Duration (in second) when flip card. Valid value in range (0, 1). |
| Name | Type | Required | Default | Description |
| :---------------------------------------- | :---------------------------------------: | :------: | :--------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [**to**](#to) | <code>Date&#124;string&#124;number</code> | yes | | <code>Date</code> or timestamp in the future. |
| [~~**containerProps**~~](#containerprops) | <code>object</code> | no | <code>undefined</code> | Props apply to the flip clock container. This prop is deprecated, you should apply directly to the <code>FlipClockCountdown</code> component. |
| [**onComplete**](#oncomplete) | <code>func</code> | no | | Callback when countdown ends<br/> **Signature**:<br/>`function() => void` |
| [**onTick**](#ontick) | <code>func</code> | no | | Callback on every interval tick<br /> **Signature**:<br/>`function({ timeDelta, completed }) => void` |
| **renderMap** | <code>`Array<boolean>`</code> | no | <code>[true, true, true, true]</code> | Each element represents the render state of each section (day, hour, minute, second). If `true` section will be rendered, `false` otherwise. |
| **labels** | <code>`Array<string>`</code> | no | <code>['Days', 'Hours', 'Minutes', 'Seconds']</code> | Custom array of labels used to represent information for each section (day, hour, minute, second). |
| **showLabels** | <code>boolean</code> | no | <code>true</code> | Set it to `false` if you don't want to show the labels. |
| **showSeparators** | <code>boolean</code> | no | <code>true</code> | Set it to `false` if you don't want to show the separators (colon) between time unit. |
| **labelStyle** | <code>React.CSSProperties</code> | no | <code>undefined</code> | The styles apply to labels `font-size`, `color`, `width`, `height`, etc. |
| **digitBlockStyle** | <code>React.CSSProperties</code> | no | <code>undefined</code> | The styles apply to digit blocks like `font-size`, `color`, `width`, `height`, etc. |
| **separatorStyle** | <code>object</code> | no | <code>undefined</code> | The styles apply to separator (colon), includes `size` and `color`. |
| **dividerStyle** | <code>object</code> | no | <code>undefined</code> | The style will be applied to divider, includes `color` and `height`. |
| **duration** | <code>number</code> | no | <code>0.7</code> | Duration (in second) when flip card. Valid value in range (0, 1). |
| **hideOnComplete** | <code>boolean</code> | no | <code>true</code> | By befault, the countdown will be hidden when it completed (or show children if provided). This will keep the timer in place and stuck at zeros when the countdown is completed. |

### `to`

Expand Down

0 comments on commit 533cbe1

Please sign in to comment.