0

Estuve buscando un modulo que me ayudara a hacer un cuenta atrás. Pero no encuentro como hacer un botón de start, stop. Levo mucho mas tiempo del que me gustaría buscando una alternativa.

import Countdown from 'react-countdown'

<Countdown
  date={Date.now() + 50000}
  intervalDelay={0}
  precision={3}
  autoStart={false} 
  renderer={props =>
    <h1>{props.total}</h1>
  }
/>
<p>{series[iSerie].coments}</p>
<div>
  <div>
    <button >pausa</button>
    <button >inicio</button>
  </div>
</div>

1 respuesta 1

2
import React, { useRef } from "react";
import Countdown from "react-countdown";

export default function App() {
  const countdownRef = useRef();

  const handleStart = () => {
    countdownRef.current.start();
  };
  const handlePause = () => {
    countdownRef.current.pause();
  };
  return (
    <div>
      <Countdown
        ref={countdownRef}
        date={Date.now() + 50000}
        intervalDelay={0}
        precision={3}
        autoStart={false}
        renderer={props => <h1>{props.total}</h1>}
      />
      <button onClick={handlePause}>pausa</button>
      <button onClick={handleStart}>inicio</button>
    </div>
  );
}
3
  • 1
    Las respuestas que son solo código no son bien recibidas en el sitio. Por favor trata de editar la pregunta añadiendo una explicación de porqué el código que compartes puede solucionar la pregunta del OP.
    – Lucía
    Commented el 30 ene. 2020 a las 11:37
  • 1
    La respuesta es correcta; aunque tiene más sentido createRef que useRef porque no nos interesa un MutableRefObject (no se va a sobreescribir la referencia). Sé que es evidente lo que hace tu código, pero toma en cuenta el comentario de @Lucía; a personas sin suficiente formación en React les ayudará saber qué estás haciendo y por qué. Saludos.
    – gugadev
    Commented el 30 ene. 2020 a las 12:01
  • Muy interesante la diferenciación de useRef y createRef, pero de donde sacaron o definieron esos atributos ? Estuve escarbando en la documentación y usando el console log, pero nunca encontré una pista. Gracias. En efecto los comentarios son importantes.
    – raul zarza
    Commented el 30 ene. 2020 a las 14:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.