count-down-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    Count Down React

    A fully customizable light weight countdown component for React using render props written in Typescript.

    Test Passing Size Version

    count-down

    Getting Started

    You can either install the module via npm or yarn:

    npm install count-down-react
    
    yarn add count-down-react
    

    Basic Example

    A simple and example of how to set up a countdown which counts down from 10 seconds.

    import React from 'react'
    import ReactDOM from 'react-dom'
    import CountDown from 'count-down-react'
    
    const CoundownRenderer = ({ days, hours, minutes, seconds }) => (
      <>
        {days} d {hours} h, {minutes} m, {seconds} s
      </>
    )
    
    ReactDOM.render(
      <CountDown date={Date.now() + 10000} renderer={CoundownRenderer} />,
      document.getElementById('root')
    )

    Live Demo

    Properties

    date: number | string | Date

    date is a mandatory prop

    renderer: function

    You should pass a Component to the renderer. The Component will be called with props {days, hours, minutes, seconds, completed}. You can use it as per your requirement

    updateFrequency: function

    If you need to change the update frequency of the count down you can pass this function. The function will be called with {days, hours, minutes, seconds, completed}

    You should return the frequency in milliseconds

    example:

    <CountDown
      date={date}
      renderer={CoundownRenderer}
      updateFrequency={({ minutes, seconds }) =>
        minutes * 60 + seconds > 600 ? 5000 : 1000
      }
    />

    Here we are updating every 5 seconds till 10 minutes and then every 1 seconds.

    Install

    npm i count-down-react

    DownloadsWeekly Downloads

    54

    Version

    1.0.12

    License

    Apache-2.0

    Unpacked Size

    24.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar