close
The Wayback Machine - https://web.archive.org/web/20201123113557/https://github.com/doczjs/docz/issues/1561
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Props of React Hooks components #1561

Open
BowenZ opened this issue Aug 21, 2020 · 0 comments
Open

Props of React Hooks components #1561

BowenZ opened this issue Aug 21, 2020 · 0 comments

Comments

@BowenZ
Copy link

@BowenZ BowenZ commented Aug 21, 2020

Hi, first of all, I'm not very good at English, so please don't mind if my grammar is weird 😁

I'm trying to write some React hooks components with TypeScript like react-use. And when I use <Props of={MyReactHookComponet}/> in mdx file, I found that it didn't generate any props.

All I can find is using import { Props } from 'gatsby-theme-docz/src/components/Props/' and write props document by myself.

Will you consider supporting generate props of hooks component?

Or is there a better way for this?

Thanks for your great job ♪(・ω・)ノ


Here is my code:

useCountdown.ts:

import { useState, useEffect, useRef, useCallback } from 'react';

type CountdownParams = {
  timer: number;
  interval?: number;
  autostart?: boolean;
  onTimeup?: () => void;
};

type CountdownResults = {
  countdown: number;
  isRunning: boolean;
  start(): void;
  pause(): void;
  set(value: number): void;
  reset(): void;
};

export default function useCountdown({
  timer,
  interval = 1000,
  autostart = false,
  onTimeup,
}: CountdownParams): CountdownResults {
  const [countdown, setCountdown] = useState(timer);
  const [isRunning, setIsRunning] = useState(autostart);
  const tickTimer = useRef<number | null>();

  const start = useCallback((): void => {
    console.log('====start====');
    setIsRunning(true);
  }, []);

  const pause = useCallback((): void => {
    console.log('====pause====');
    if (tickTimer.current) {
      clearInterval(tickTimer.current);
      tickTimer.current = null;
      setIsRunning(false);
    }
  }, []);

  const reset = useCallback((): void => {
    console.log('====reset====');
    setCountdown(timer);
  }, [timer]);

  const set = useCallback((value: number): void => {
    setCountdown(value);
  }, []);

  useEffect(() => {
    if (isRunning && !tickTimer.current) {
      const intervalId = setInterval((): void => {
        setCountdown((prev) => prev - 1);
      }, interval);
      tickTimer.current = intervalId;
    }
  }, [interval, isRunning]);

  useEffect(() => {
    if (countdown === 0 && isRunning && tickTimer.current) {
      clearInterval(tickTimer.current);
      tickTimer.current = null;
      setIsRunning(false);
      if (onTimeup) {
        onTimeup();
      }
    }
  }, [countdown, isRunning, onTimeup]);

  useEffect(() => {
    return (): void => {
      pause();
    };
  }, [pause]);

  return {
    countdown,
    isRunning,
    start,
    pause,
    set,
    reset,
  };
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.