@unicef/material-ui

UNICEF material-ui

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 live Demo site.

Getting started

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

 npm install @unicef/material-ui

Usage

Adding UNICEF theme to your app

This is customized version of theme for whole application. To use UNICEF theme add MuiThemeProvider at the top level of your app, it will set the custom styles of unicef down to the component tree.

More info: Material-ui theming

// App.js
import React from "react"
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"
import { theme } from "unicef-material-ui"

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

Example project

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

Custom components

All components require to be wrapped inside of a theme using MuiThemeProvider at the top level of the App, as explained above.

Development

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

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

The following commands are available:

npm start

Builds the app automatically for production to the dist folder, everytime you make changes in the code.

npm start

This build we are utilizing in example project, so each time we make some changes in the app. it builds the app to dist folder. so that we can see changes in the example project.

Now open new tab in bash and run this commands:

cd example
npm install (only if it is firt 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.

npm run build

Builds the app for production to the dist folder.

It bundles application in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

npm run styleguide

Generates the documentation the development mode. Open http://localhost:6060 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

We use styleguidelist for documenting our custom components.

npm run styleguide:build

Builds the styleguide for production to the styleguide folder.
It correctly bundles React-styleguide in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

License

Distributed under GLPv3.