CODEWITHSUNDEEP
javascriptreactjs
Jamie King
Jamie King

Reputation: 53

How to use react-compound-timer in my React app

I want to add a timer component to my React app, and I found a package that I'm trying to use: https://www.npmjs.com/package/react-compound-timer

I'm fairly new to using React and I'm struggling to understand the following provided example:

<Timer
    initialTime={55000}
>
    {({ start, resume, pause, stop, reset, timerState }) => (
        <React.Fragment>
            <div>
                <Timer.Days /> days
                <Timer.Hours /> hours
                <Timer.Minutes /> minutes
                <Timer.Seconds /> seconds
                <Timer.Milliseconds /> milliseconds
            </div>
            <div>{timerState}</div>
            <br />
            <div>
                <button onClick={start}>Start</button>
                <button onClick={pause}>Pause</button>
                <button onClick={resume}>Resume</button>
                <button onClick={stop}>Stop</button>
                <button onClick={reset}>Reset</button>
            </div>
        </React.Fragment>
    )}
</Timer>

1.) Where to 'start, resume, pause, stop, reset, timerState' come from?
2.) How would I call the 'start' function outside of <Timer> ? For example, if I implemented my own start button in another component?

Upvotes: 4

Views: 828

Answers (2)

FujiRoyale
FujiRoyale

Reputation: 832

The start function is getting passed in as props.

const handleStart = () => {
  // code to handle start in here.
}

You would call it thusly:

<Timer start={handleStart) ...rest of props />

The same would be true for all props found in Timer. At some point a parent, or grandparent component will have a definition for the functions passed in as props to the timer component.

Then when you call said component you will import at the top of the Timer File import StartButton from './start-button' //(or whatever you named the startbutton file

const handlePressStartButton = () => {
  // do the pressing of the startbutton things here. 
}

The timer component could be called thusly

 <Timer start={handlePressStartButton} 
        pause={handlePressPauseButton}
        resume={handlePressResumeButton}
        stop={handlePressStopButton}
        reset={handlePressResetButton} />

Then you can simply put a console.log initially in all the handlePress functions. You can even call them whatever you want.

1.) Where to 'start, resume, pause, stop, reset, timerState' come from? You provide them when you use this component. you can use in in your component in a sub component wherever you'd like to. Start in the <App to get it working then abstract from there.

2.) How would I call the 'start' function outside of ? For example, if I implemented my own start button in another component? I hope I provided answers to this above. Basically you will provide a function for this prop is perhaps a better way to think about it.

I hope this helps. Good luck and happy coding.

Upvotes: 0

twharmon
twharmon

Reputation: 4282

Looks like Timer is a higher order component.

1.) Where to 'start, resume, pause, stop, reset, timerState' come from? The Timer component returns a new component, and those are the props.

2.) How would I call the 'start' function outside of ? for example, if I implemented my own start button in another component? I'm not sure you can. You can probably expand the scope of the Timer component and put more (like your start button) inside of the <React.Fragment>.

Upvotes: 1

Related Questions