Customized version for UNICEF of Material UI. Material UI is a set of ReactJS user interface components based on Google's material design written in Javascript.

You can see a Demo site and the reference documentation.

In order to use the UNICEF's Material UI components in your React project install the npm package.

 npm install @unicef/material-ui

To use UNICEF theme add ThemeProvider at the top level of your app and warp you components inside UNICEFStyleProvider

// App.js
import React from 'react'
import { ThemeProvider } from '@mui/material/styles'
import { theme, UNICEFStyleProvider } from '@unicef/material-ui'

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <UNICEFStyleProvider>
        {/* Components*/}
      </UNICEFStyleProvider>
    </ThemeProvider>
  )
}

More info: Material-ui theming

You have an full example react project that showcases how to use the components in /example.

In order to extend the components, clone the project and install the dependencies.

git clone https://github.com/unicef/unicef-material-ui.git
cd unicef-material-ui
npm install

The following commands are available:

Builds the library of components in watch mode.

npm start

Apart from the documentation The package comes with an example app - create-react-app - which is useful for testing and running the components.

cd example
npm install # only if it is first time
npm start

Runs the app in the development mode. Open http://localhost:3000 to view the app in the browser.

It will reload automatically upon edits. Lint errors are also displayed on the console.

Builds the component library for production. Leaves the output in the dist folder.

Generates the documentation to be viewed in http://localhost:6060.

Page reloads on any change. Lint errors are displayed in the console, too.

We use styleguidelist for documenting our custom components.

Builds the styleguide for production. The output is stored in styleguide folder.

Builds the styleguide docs as well as the example. The output is stored in site folder.

Runs npm run build:site and then deploys the output to Github gh-pages.

To deploy from a clean repo

git clone https://unicef.github.io/unicef-material-ui/
cd unicef-material-ui
npm install
npm build
cd example
npm install
cd ..
npm deploy

There is a Github action (pipeline) that automatically releases in npm whenever a release is created. To create a release, previously you need to ensure the version is changed in packages.json and then create a tag in the repository. These are the steps:

1. Get the latest master
2. Edit packages.json and increase the version number and save to origin/master.

     # After editing packages.json
     git commit -m "bump version x.y.z"
     git push origin master

3. Create a tag and push it to master:

     git tag releases/vX.Y.Z  # where X.Y.Z is a semver number such as 1.6.9
     git push origin tags

4. Then in the GitHub web interface create the release. The action will be automatically triggered.

UNICEF works in over 190 countries and territories to protect the rights of every child. UNICEF has spent more than 70 years working to improve the lives of children and their families. In UNICEF, we believe all children have a right to survive, thrive and fulfill their potential – to the benefit of a better world.

Donate

Just fork the project and make a pull request. You may also consider donating.

Distributed under GLPv3.