Componentz: a MUI-based UI library that can provide simple and performatic ways to use components
Componentz
Componentz is a MUI-based UI library that can provide simple and performatic ways to use components.
The goal is not to replace the MUI, but to be an extension
Dependencies
- MUI: A UI library that serves as the basis for the project
- You can learn more about MUI here
- MobX is used to generate Stores and Hooks powered by these stores to make a beautiful reactive way to control the data on your interfaces.
- Meet this wonderful lib here
- Inversify is fundamental for dependency injection strategies
- The strategy about this architecture can be found here
Installation
Our dependencies:
# Using npm:
npm install @mui/material @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite
# Using yarn:
yarn add @mui/material @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite
Installing Componentz ?
# Using npm:
npm i @euk-labs/componentz
# Using yarn:
yarn add @euk-labs/componentz
Usage
We’ve separated the logical part of the component, which has the minimum responsibilities to be as generic as possible, so we use Mobx for state management to make this happen.
The complete documentation is under construction, we will soon make it available.
First add a Inversify provider and reflect-metadata at the root of your project
In this example we are using Next but the idea can be used for other React applications
import 'reflect-metadata';
import { globalContainer } from '@euk-labs/componentz';
import { ThemeProvider } from '@mui/material/styles';
import { CssBaseline } from '@mui/material';
import { Provider } from 'inversify-react';
import theme from 'styles/theme';
function MyApp({ Component, pageProps }) {
return (
<Provider container={globalContainer}>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</Provider>
);
}
export default MyApp;
A simple example of what a component’s usage pattern looks like:
import { useUIStore, Breadcrumb } from '@euk-labs/componentz';
import { Box } from '@mui/material';
import { useEffect } from 'react';
function About() {
// A hook that delivers all the control of a part of the application, in this case the UI
const uiStore = useUIStore();
useEffect(() => {
// Controlling the state
uiStore.breadcrumb.setPaths([
{
label: 'Home',
link: '/',
},
{
label: 'About',
link: '/about',
},
]);
}, []);
return (
<Box>
// Rendering the Breadcrumb component on any DOM level
<Breadcrumb />
// You can add your JSX code here
<Box>...</Box>
</Box>
);
}
export default Home;
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.