Neptune: Planet or Myth?

    react-svg-timer

    2.1.1 • Public • Published

    React SVG Timer

    NPM

    A React component to provide an SVG-based timer button with visual feedback of elapsed time.

    This is an improved iteration of previous projects:

    All have their foundation in this fiddle.

    Demo

    Demo: markau.github.io/react-svg-timer

    Installation

    yarn add react-svg-timer or npm install react-svg-timer

    Usage

    The minimum declaration is:

    import ReactSvgTimer from 'react-svg-timer';
     
    <ReactSvgTimer timerCount={# seconds}/>

    Properties

    The component can take additional, optional props:

    • countdownColor: string: the color of the countdown ring. Type can be hex, rgb, rgba - whatever an SVG can use.
    • innerColor: string: the color of the inner circle ring.
    • outerColor: string: the color of the outer ring.
    • resetTimerRequested: bool: Whether the user has requested the timer be reset.
    • resetTimer: func: A callback function to further handle the timer reset event.
    • completeTimer: bool: Indicates whether the timer has reached the desired time.
    • timerDuration: int: The elapsed duration in milliseconds.
    • displayCountdown: bool: Shows/hides the numerical countdown.

    A more complete implementation could therefore be:

     
    // To keep track of the milliseconds elapsed
    let timer = 0
    let [resetRequested, setResetRequested] = useState(false)
    let [timerIsComplete, setTimerIsComplete] = useState(false)
    let [logMilliseconds, setLogMilliseconds] = useState(true)
     
    onComplete(status) {
      setTimerIsComplete(status)
    }
     
    onReset() {
      setResetRequested(false)
    }
     
    timerValue(value) {
      timer = value;
      if (logMilliseconds) {
        console.log(value);
      }
    }
     
    onResetRequest() {
      setResetRequested(true)
      timer = 0;
    }
     
    return (
     
      <ReactSvgTimer
        timerCount={6}
        countdownColor="#00ffa8"
        innerColor="#fff"
        outerColor="#000"
        resetTimer={onReset}
        completeTimer={onComplete}
        resetTimerRequested={resetRequested}
        timerDuration={timerValue}
        displayCountdown={displayCountdown}
      />
     
    )
     
     

    The optional props are designed to provide flexibility for implementation. You can use the timer as a discrete component, and just listen for the timerComplete callback. Alternatively, for example, you could choose to hide the numerical display countdown with displayCountdown={false}, and use the timerDuration callback to provide your own numerical countdown.

    Development

    Built with create-react-library check that project to see how to build and run this module locally.

    License

    MIT © markau

    Keywords

    none

    Install

    npm i react-svg-timer

    DownloadsWeekly Downloads

    11

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    940 kB

    Total Files

    6

    Last publish

    Collaborators

    • markau