react-svg-path-timer v1.1.11

react-svg-path-timer

Timer made with an SVG path. Easily display a timer in a more creative and interactive way! Can also be used for easy SVG animation!

🚀 Getting Started

Using npm:

npm i react-svg-path-timer

✨ Usage

Simplest Use

import React from "react";
import SvgPathTimer from "react-svg-path-timer";

export default function MyComponent() {
  return (
    <div>
      <SvgPathTimer strokeColor={"blue"} />
    </div>
  );
}

Utilizing Props

import React, { useState } from "react";
import SvgPathTimer from "react-svg-path-timer";

export default function MyComponent() {
  const [timerActive, setTimerActive] = useState(false);
  const [resetOnChange, setResetOnChange] = useState(0);

  function finishCallback() {
    document.getElementById("finish-message").innerHTML = "The timer finished!";
  }

  const containerStyles = {
    height: "300px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    padding: "50px",
  };

  return (
    <div style={containerStyles}>
      <SvgPathTimer
        time={10}
        active={timerActive}
        resetOnChange={resetOnChange}
        finishCallback={finishCallback}
        d={
          "M32.9,-49.3C33.1,-32.7,17.3,-16.3,20.8,3.5C24.3,23.3,47.1,46.7,46.9,60.5C46.7,74.4,23.3,78.8,5.2,73.6C-13,68.4,-25.9,53.7,-40.7,39.8C-55.5,25.9,-72,13,-65.7,6.3C-59.4,-0.4,-30.3,-0.7,-15.5,-17.4C-0.7,-34,-0.4,-66.9,8,-74.8C16.3,-82.8,32.7,-65.9,32.9,-49.3Z"
        }
        strokeWidth={5}
        strokeLinecap={"round"}
        strokeColor={"#3d405b"}
        pathColor={"#e07a5f"}
        digitalTimerStyles={{ top: "10%" }}
      />
      <button onClick={() => setResetOnChange(resetOnChange + 1)}>Reset</button>
      <div id={"finish-message"}></div>
    </div>
  );
}

📌 Props