DHIS2 UI Library

In this tutorial you will do the following:

  1. Get started with the @dhis2/ui library
  2. Import and use UI components into your application

Prerequisites#

Before we continue, make sure that you followed the steps provided in the first tutorial: Environment Setup

1. Getting started#

DHIS2 Design System#

The UI library is the implementation of the DHIS2 Design System. Using this system you can design and build applications that are usable, powerful and consistent with other DHIS2 applications.

Live demos documentation#

To learn more about the DHIS2 UI library and see a list of demos, make sure to check out the live demos documentation that uses Storybook to showcase all available components. Here, you will find a description for each component and you will be able to interact with its props. You can also find code snippets for each demo to easily copy and paste them into your project.

Installation#

To get started using the DHIS2 UI library, navigate to your project and add @dhis2/ui as a dependency:

yarn add @dhis2/ui

2. Import and use UI components#

In this example, we'll be adding a simple Button component to get familiar with the UI library and learn how to import and use its components.

Add a Button#

First, open up the src/App.js file and import a Button into our application as shown below:

import { Button } from '@dhis2/ui'

Then, we'll add a Button component that's primary and large.

Remember that you can easily copy and paste the code from the documentation.

You should have something like this:

src/App.js
import { DataQuery } from '@dhis2/app-runtime'
import i18n from '@dhis2/d2-i18n'
import React from 'react'
import classes from './App.module.css'
import { Button } from '@dhis2/ui'
// ...
const MyApp = () => (
<div className={classes.container}>
<Button name="Primary button" onClick={logger} primary large value="default">
Click me!
</Button>
// ...
</div>
)
export default MyApp

The onClick event handler#

As we copied this code directly from the documentation, we get the function onClick={logger} as the event handler. However, logger hasn't been defined so you may get an error. To test if this function works, let's pass the following function instead:

<Button
name="Primary button"
onClick={() => window.alert("It works!")}
primary value="default">
Click me!
</Button>

In your browser, you should be able to see something similar when you click the button:

That's it for the Button component! 👏🏽

note

If you want to add more components to your application, make sure to follow this quick guide on How to add a Table component as an example.

Want to learn more?#

What's next?#

In the next tutorial you will learn how to interact with the DHIS2 Web API and fetch data using the DHIS2 App Runtime!