What is a Todo app without some clocks!? Well, still a Todo app, but certainly not as fun as one with the clocks!

So, let's add a couple of clocks to our app, to help us track time while we perform our tasks (and to demonstrate dependencies feature).

For this, we will use react-clock library from NPM. We can add it to our project as a dependency like this:

// ...
dependencies {=json
"react-clock": "3.0.0"

Run (if it is already running, stop it first and then run it again)

$ wasp start

to have Wasp download and install new dependency (that happens on start of wasp start).

Next, let's create a new component Clocks where we can play with the clocks.

import React, { useEffect, useState } from 'react'
import Clock from 'react-clock'
import 'react-clock/dist/Clock.css'
export default () => {
const [time, setTime] = useState(new Date())
useEffect(() => {
const interval = setInterval(() => setTime(new Date()), 1000)
return () => clearInterval(interval)
}, [])
return (
<div style={{ display: 'flex' }}>
<Clock value={time} />
<Clock value={new Date(time.getTime() + 60 * 60000)} />

And let's import it in our main React component.

// ...
import Clocks from './Clocks'
const MainPage = () => {
// ...
return (
// ...
<p> <Clocks /> </p>
// ...
// ...

As you can see, importing other files from /ext is completely normal, just use the relative path.

That is it! We added a dependency and used it in our project.