This is the React component Library based off the Design System for PMB Plus.
The design system can be viewed on Figma
You can easily install the library via NPM or Yarn:
npm
$ npm install umqombothi-component-library
yarn
$ yarn add umqombothi-component-library
You can import the components like so:
import React from 'react'
import {Input} from 'umqombothi-component-library'
import ReactDOM from 'react-dom';
function App() {
return (
<Input
value={this.state.inputValue}
placeholder="Type in me"
/>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
To render it with NextJS there are additional steps. Check out this Codesandbox for a working example.
This is just to make sure you have the correct setup in your next.config.js
and modules installed. ๐
I. Install modules
$ yarn add umqombohti-component-library next-transpile-modules @zeit/next-css @svgr/webpack
II. Get your next.config.js
setup correctly.
The reason why you installed : next-transpile-modules & @zeit/next-cs
was to tell Next that you need these files to be transpiled and included with your NextJS bundle for when you deploy your app.
//next.config.js
const withTM = require("next-transpile-modules");
const withCSS = require("@zeit/next-css");
module.exports = withCSS(
withTM({
transpileModules: [
"umqombothi-component-library"
],
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
})
);
Because the lib includes svgs in it, we need to a loader so Next can read them. (Wow we do a lot for this Next thingy ๐คจ)
So the lib uses TailwindCSS for writting scalable CSS. You can easliy customes colours, spacing etc of components, but what is also great is you can easily use the provided classes to apply custom margin,padding,height, width etc.
For example:
<>
<div className="flex flex-col p-10">
<HeadingOne text="Welcome to Umqombothi!" />
<Input placeholder="You can tell me anything inbetween everything." />
<LightPinkButton text="Send it" />
</div>
</>
Hear we just created a flex column and added about 2.5rem of padding to the column. ๐