react-timeout-button storybook

 

Simple unstyled button that will call a given function when specified time has elapsed.

The component plays very well with frameworks such as styled-components, emotion and Material UI.

 

• Simple text syntax gives control over output
• Formatted remaining time output if more than 60 seconds (e.g. 2m 30s)
• Display time remaining with animated overlay
• Control overlay color and opacity
• Control direction of overlay animation (ltr or rtl)
• Display remaining time with 0-3 digits
• Pause timer on hover
• Complete timer on hover

 

Overview

• 1. Installation and usage
  • 1.1 With frameworks
• 2. Options
• 3. DOM output

 

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>