Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@unicef/material-ui
Advanced tools
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 MuiThemeProvider
at the top level of your app and warp you components inside UNICEFStyleProvider
// App.js
import React from 'react'
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
import { theme, UNICEFStyleProvider } from '@unicef/material-ui'
export default function App() {
return (
<MuiThemeProvider theme={theme}>
<UNICEFStyleProvider>
{/* Components*/}
</UNICEFStyleProvider>
</MuiThemeProvider>
)
}
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:
npm start
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.
npm run build
Builds the component library for production. Leaves the output in the dist
folder.
npm run docs
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.
npm run build:docs
Builds the styleguide for production. The output is stored in styleguide
folder.
npm run build:site
Builds the styleguide docs as well as the example. The output is stored in site
folder.
npm run deploy
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:
master
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
git tag releases/vX.Y.Z # where X.Y.Z is a semver number such as 1.6.9
git push origin tags
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.
Just fork the project and make a pull request. You may also consider donating.
Distributed under GLPv3.
FAQs
UNICEF theme and components of material-ui for react
We found that @unicef/material-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.