Dependencies
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 the app.dependencies
feature).
For this, we will use the react-clock
library from NPM. We can add it to our project as a dependency like this:
app TodoApp { title: "Todo app",
// ... dependencies: [ ("react-clock", "3.0.0") ]}
Run
wasp start
to have Wasp download and install the new dependency. If wasp start
is already running, Wasp will detect the dependency change, and restart automatically.
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.