In this guide we're going to be using React hooks added in React v16.8. If you're using the old demo-v1 you will have to convert these to lifecycle functions (e.g.
In this guide we are going to create a themeable component.
We're going to add a countdown component.
00:00:30 until sale begins
1. Create your component
Create the file
Below is the basics of a countdown component (you can see a working example above).
2. Export your component
Now you've created your component you will need to export it from the
3. Include your component
The next step is to include the component somewhere on the page. We're going to add it to the header. Once you've done this you should see your component appear on the page...it will just be unstyled.
4. Make your component 'themeable'
Let's head back to your component file
client/src/components/Countdown.js and add our
We've now imported both
themed. We then create a new component
CountdownLayout that is
We can call this whatever we want but our naming convention suggests it should have a
Layout suffix. e.g.
We can then style this using the variables defined in our
5. Add translations
One last bit of tidy up here is we've got text that can't be translated.
@deity/falcon-i18n package we can easily make these string translatable.
6. Code Cleanup
For extra brownie points it would be great to use our themeable
Text component rather than
<p> tags. This will mean it's both themeable and will adopt default styles already assigned to the
That's it...you've now got a fancy countdown component you can theme using your
client/src/styling/theme.js or modify with our theme editor tool.
Here's the complete