react component of an svg clock that has a useeffect hook that updates the clock every second in typescript

You can create a React component for an SVG clock with the useEffect hook that updates the clock every second like this:


import React, { useState, useEffect } from 'react';

interface Props {
  size: number;
  color?: string;
}

const Clock: React.FC<Props> = ({ size, color = 'black' }) => {
  const [time, setTime] = useState<Date>(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  const seconds = time.getSeconds();
  const minutes = time.getMinutes();
  const hours = time.getHours() % 12;

  const secondsAngle = (seconds / 60) * 360;
  const minutesAngle = (minutes / 60) * 360 + (seconds / 60) * 6;
  const hoursAngle = (hours / 12) * 360 + (minutes / 60) * 30;

  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
      <circle cx={size / 2} cy={size / 2} r={size / 2} fill="white" stroke={color} strokeWidth={2} />
      <line x1={size / 2} y1={size / 2} x2={size / 2 + (size / 2 - 20) * Math.cos(hoursAngle * (Math.PI / 180))} y2={size / 2 + (size / 2 - 20) * Math.sin(hoursAngle * (Math.PI / 180))} stroke={color} strokeWidth={4} strokeLinecap="round" />
      <line x1={size / 2} y1={size / 2} x2={size / 2 + (size / 2 - 10) * Math.cos(minutesAngle * (Math.PI / 180))} y2={size / 2 + (size / 2 - 10) * Math.sin(minutesAngle * (Math.PI / 180))} stroke={color} strokeWidth={3} strokeLinecap="round" />
      <line x1={size / 2} y1={size / 2} x2={size / 2 + (size / 2 - 5) * Math.cos(secondsAngle * (Math.PI / 180))} y2={size / 2 + (size / 2 - 5) * Math.sin(secondsAngle * (Math.PI / 180))} stroke={color} strokeWidth={2} strokeLinecap="round" />
      <circle cx={size / 2} cy={size / 2} r={5} fill={color} />
    </svg>
  );
};

export default Clock;
1706 chars
41 lines

In this example, the Clock component takes two props: size and color. The size prop specifies the width and height of the SVG clock, while the color prop specifies the color of the clock hands and the center dot.

The useEffect hook is used to update the time state every second by setting up an interval to call setTime with the current date. The interval is cleared when the component unmounts using the function returned from the useEffect hook.

The current time is then used to calculate the angles for the clock hands based on the current second, minute, and hour. These angles are then used to draw lines and a circle on the SVG element.

Note that the math for calculating the angles is done using radians, so the angles are converted from degrees to radians using (Math.PI / 180).

You can now use the Clock component in your app like this:


import React from 'react';
import Clock from './Clock';

const App: React.FC = () => {
  return <Clock size={200} color="red" />;
};

export default App;
154 chars
9 lines

This will render a red SVG clock with a size of 200x200 in your app.

similar typescript code snippets

new es6 functional react component with the name of grandfatherclock. the component returns an svg clock that updated every second in typescript

create a react functional component with props and tailwind css in typescript

react listbox component in typescript

how to create an async thunk in typescript

create a react functional component in typescript

create a react functional component with props in typescript

how to set a type in a component in typescript

how to integrate gumroad in react in typescript

scroll hook react in typescript

react query in typescript

related categories