DEV Community 👩‍💻👨‍💻

Cover image for Building an Application with Mantine in ReactJS #1
Sam Preston
Sam Preston

Posted on • Updated on

Building an Application with Mantine in ReactJS #1

Mantine Banner

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.

Create-React-App Filestructure

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...

App

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.

AppShell Demo

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Light Mode AppShell

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 (2)

Collapse
 
ogranada profile image
Andres Granada

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

Collapse
 
samp_reston profile image
Sam Preston Author

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.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.