react-timeout-button
v2.0.8
Published
React timed button with overlay option, formatted time output and no styles
Downloads
22
Maintainers
Readme
Overview
Usage
Install the component
$ npm i react-timeout-button
Use it as you wish
import { ReactTimeoutButton } from 'react-timeout-button'
....
<ReactTimeoutButton timeout={8000} text="Continue in $timeout" />
This will render a basic HTML button with a 8 second timer and show the text inside replacing $timeout
with time remaining in full seconds ...and not look very good.
ReactTimeoutButton accepts any property that a normal
<button>
tag would do, as well as children - so just pour on.
With frameworks
ReactTimeoutButton can also be used as a referenced component by frameworks such as Material UI.
import { Button } from '@material-ui/core'
import { ReactTimeoutButton } from 'react-timeout-button'
...
<Button
variant="contained"
color="primary"
component={ReactTimeoutButton}
timeout={8000}
text="Continue ${in ($timeout)}"
overlay={true}
/>
Or you can style it with styled-components or emotion.
import { styled } from 'styled-components'
import { ReactTimeoutButton } from 'react-timeout-button'
...
const Button = styled(ReactTimeoutButton)`
border-radius: 3px;
background-color: #ff0000;
color: #ffffff;
border: 0 none;
outline: none;
`
...
<Button
timeout={8000}
text="Continue ${in ($timeout)}"
overlay={true}
/>
Options
<ReactTimeoutButton
cancelTimeoutOnHover?: boolean
digits?: 0 | 1 | 2 | 3
overlay?: boolean
overlayBackground?: string
overlayOpacity?: number
overlayPosition?: 'before' | 'after'
overlayRtl?: boolean
pauseOnHover?: boolean
text?: string
timeout: number
onTimeout?: () => void
/>
cancelTimeoutOnHover?: boolean
If set to true then the timer will run out when user hovers over button.
digits?: 0 | 1 | 2 | 3
Default: 0
How many digits to show in the
$timeout
replaced string.overlay?: boolean
Set to
true
to show an animation of the remaining time with a opaque color retracting from left-to-right or right-to-left.overlayBackground?: string
Default: "#000000"
Set the color used for overlay.
overlayOpacity?: number
Default: 0.15
Set the opacity used for overlay.
overlayPosition?: "before" | "after"
Default: "before"
Control if the overlay should be behind of in front of any possibly shown text.
overlayRtl?: boolean
Set to
true
to make overlay animation go right-to-left.pauseOnHover?: boolean
Set to
true
to pause the timer when user hovers over button.text?: string
Default: "$timeout"
Enter text to display on button with a simple templated syntax to do it.
- $timeout - This string will be replaced by the time remaining with as many digits as configured (default 0)
- ${} - Any text inside the curly braces will be removed when the timer is done.
timeout: number
How long the timer should be set to in miliseconds (e.g. 1000 equals 1 second).
onTimeout?: () => void
A function that will be called when the timer has completed.
DOM output
The regular usage of the component, and the output when used as a referenced component will vary - but generally the inner DOM structure of the wrapper will remain when referenced.
Regular output
Note that only one of the overlays are visible at the time depending on the value of the overlayPosition
property.
<button class="react-timeout-button">
<span class="react-timeout-button__overlay react-timeout-button__overlay--before" />
<span class="react-timeout-button__text">Continue in (3)</span>
<span class="react-timeout-button__overlay react-timeout-button__overlay--after" />
</button>