wasp/web/docs/tutorials/todo-app/dependencies.md

title
Dependencies

import useBaseUrl from '@docusaurus/useBaseUrl';

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"
json=}

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)} />
    </div>
  )
}

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

// ...
import Clocks from './Clocks'

const MainPage = () => {
  // ...

  return (
    <div>
      // ...

      <div> <Clocks /> </div>

      // ...
    </div>
  )
}
// ...

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.