Building an Application with Mantine in ReactJS #1

Intro

After 1 year of learning ReactJS and frontend development I've been looking for adventure, this is when I found Mantine.

Mantine is:

"A fully featured React components library"

Mantine also provides many options for styling and even it's off-the-shelf hooks. This was something I was completely unfamiliar with. At the time I was also learning to use TypeScript within ReactJS projects and struggling.

Throughout this series of articles I'll be discussing my struggles with ReactJS with Mantine and TypeScript, and will be sharing my solutions as well has hopefully receiving some!

Part 1 - Preparing

The tool I'm building is a interface for an 'Asset Configuration Management Tool' using Ansible under the hood.

To start we'll set up the project:
npx create-react-app . --template typescript
I'll be starting the project in an already named directory hence the . in-between create-react-app and --template typescript.

This will generate the lovely create-react-app boilerplate with TypeScript already plugged in.

Second step will be removing all the boilerplate code to start from a blank canvas. Once done we'll run in the terminal npm run start. And after removing all css...

Currently we won't be structuring the codebases file structure as we'll address that as our needs evolve.

Part 2 - Building the Home Page

First we'll install Mantine:
npm install @mantine/hooks @mantine/core

To start we want a basic application format with a navigation bar for users to browse the application. Luckily this is where the first Mantine component, AppShell.

We'll import the necessary components from the Mantine Core library:



import React from 'react';
import './styles/App.css';

import { AppShell, Navbar} from '@mantine/core'

function App() {
  return (
    <div>
      Hello Dev.to!
    </div>
  );
}

export default App;

We'll now start to configure our AppShell component, note I haven't imported the Header component as we won't be requiring it for this project.



import React from 'react';
import './styles/App.css';

import { AppShell, Navbar } from '@mantine/core'

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          {/* Navbar Content */}
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

export default App;

As you can see I've set the height to the Viewport Height of 100% this mean it will extend vertical across the whole application. This is because we want to make this AppShell the backbone of the application.

Sadly you can barely see the line separator between the Navbar and the Application window here, this will change when we add custom styling.

Conclusion

Next time we'll add styling so we can see the difference between the two sections created by AppShell. Mantine have a provider which you can apply styles globally which is great for implementing a dark/light feature which we'll be doing!

Thanks for reading, let me know you opinions and hope to find you in the next one!

Top comments (3)

Andres Granada • Feb 20 '22

Have you tried MUI library? if yes, why do you think mantine is better?

Sam Preston • Feb 20 '22

MUI is my default go to, I really like it and it's accompanying documentation. I chose Mantine for this project because I didn't need to get it completed as fast as I could, so I chose to learn a new library which comes with some in-built hooks to play around with.