Boniface's Blog
Best UI libraries in ReactJS

Best UI libraries in ReactJS

Emmanuel Boniface's photo
Emmanuel Boniface
·

5 min read

ReactJS is the most popular JavaScript framework (or a library) and the most widely used of all frontend frameworks in JavaScript. What make ReactJS unique is that you get to choose which package or library to work with (you get to choose your team) unlike other framework that throws and force you to work with specific packages. JavaScript has so many libraries that can ease the stress of writing codes from scratch and so does ReactJS. ReactJS is a framework/library that has its own libraries this is mind blowing. All libraries in JavaScript can be plugged into ReactJS and will work fine, however there are some libraries that are only specific to ReactJS alone and cannot work with Vanilla JavaScript.

What are React Styling Libraries?

These are libraries within ReactJS that helps in building User Interface very fast, these libraries help ease the stress of writing much CSS, just as Bootstrap CSS and or Tailwind CSS help in reducing the stress of writing much CSS code so are these UI libraries in React. There are handful of UI Libraries in React but these are the top 4 I have work with on a React Project

  • Material UI
  • Ant Design
  • React-Bootstrap
  • Chakra UI

Material UI is the most popular UI Library in React it offers a comprehensive suite of UI tools to help build component faster and it is my most preferred of all React UI libraries. After installing Material UI with NPM all that is needed is to import desired component provided my Material UI into our code.

import {AppBar, Container, MenuItem, Select, Toolbar} from "@material-ui/core";
  return (
  <AppBar color="transparent" position="static">
        <Container>
          <Toolbar>
            <Typography      
             variate="h3" >
              Universe
            </Typography>
            <Select
             variant="outlined"
            >
              <MenuItem value={"USD"}>USD</MenuItem>
              <MenuItem value={"NGN"}>NGA</MenuItem>
            </Select>
          </Toolbar>
        </Container>
      </AppBar>
)

The code snippet above shows how to import and use Material UI component. To style these imported components and change Defaults themes, extra component (makeStyles, ThemeProvider) can also be imported

import { makeStyles,   ThemeProvider, } from "@material-ui/core";

const useStyle = makeStyles((theme) => ({
  title: {
    flex: 1,
    color: "black",
    fontWeight: "bold",
    cursor: "pointer",
    fontSize: "2rem",
    textTransform: "uppercase",
    [theme.breakpoints.down("sm")]: { fontSize: "1rem" },
  },
}));

  const darktheme = createTheme({
    palette: {
      primary: {
        main: "rgba(106,90,205)",
      },
      type: "dark",
    },
  });

To use these styles, we create an instance of the useStyles which is named classes

const classes = useStyle();

return (
    <ThemeProvider theme={darktheme}>
      <AppBar color="transparent" position="static">
        <Container>
          <Toolbar>
            <Typography
              className={classes.title}
              variate="h3"
              onClick={() => history.push("/")}
            >
              Cryptocurrency <span style={{ color: "lime" }}>Universe</span>
            </Typography>
            <Select
              variant="outlined"
              value={currency}
              style={{
                width: 100,
                height: 40,
                marginRight: 25,
              }}
              onChange={(e) => setCurrency(e.target.value)}
            >
              <MenuItem value={"USD"}>USD</MenuItem>
              <MenuItem value={"NGN"}>NGA</MenuItem>
            </Select>
          </Toolbar>
        </Container>
      </AppBar>
    </ThemeProvider>
  );

Ant Design is a React UI library that contains a set of high quality components and demos for building rich, interactive user interface. After installing Ant Design, the ant design CSS file should be imported in the index.js file, this will allow ant design styling to be available in all component.

import React from 'react';
import ReactDOM from 'react-dom'; 
import App from './App';
import 'antd/dist/antd.css'; // the ant design css

ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

With the code above the ant design styling is now available in all JS file. To use the ant design all we need is to import the components provided by ant Design. Basic usage

 import React from 'react';
import { Typography, Row, Col, Statistic } from 'antd';
const { Title } = Typography; // we can also perform basic destructuring  

const Homepage = () => {
  return (
    <>
      <Title level={2} className="heading">Global </Title>
      <Row gutter={[32, 32]}>
        <Col span={12}><Statistic title="Total " value={lorem } /></Col>
        <Col span={12}><Statistic title=" Exchanges" value={lorem} /></Col>
        <Col span={12}><Statistic title="Total Market Cap:" value={lorem} /></Col>
        <Col span={12}><Statistic title="Total "/>lorem</Col>
        <Col span={12}><Statistic title="lorem " value={lorem } />lorem</Col>
      </Row>
      <div className="home-heading-container">
        <Title level={2} className="home-title">Top 10 </Title>
        <Title level={3} className="show-more"><Link to="/lorem">Show more</Link></Title>
      </div>
      <div className="home-heading-container">
        <Title level={2} className="home-title"> News</Title>
        <Title level={3}><Link to="/news">Show more</Link></Title>
      </div>    </>
  );
};

export default Homepage;

React-Bootstrap Is my second Favourite after Material UI, if you are comfortable working with Bootstrap Then React-Bootstrap should not be a problem. React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React Components. After installing react-bootstrap with NPM, Bootstrap CSS also needs to be installed with NPM and imported in the index.js file just has it was done with the ant design CSS file this will enable all react-bootstrap component to have the bootstrap styling

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css"; // bootstrap css
ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById("root")
);

To use these components provided by react-bootstrap we need to import them

import React from "react";
import "./Header.css";
import {
  FormControl,
  Navbar,
  Nav,
  Dropdown,
  Badge,
  Button,
} from "react-bootstrap";
const Header = () => {
  return (
    <Navbar variant="light" className="Navbar">
      <div className="navItems">
        <Navbar.Brand style={{ fontSize: "2rem", color: "white" }}>
          <Link to="/">BONIFACE HACKNODE</Link>
        </Navbar.Brand>
        <Navbar.Text className="search">
          <FormControl
            style={{ width: 500 }}
            placeholder="Search Product"
            className="m-auto"
          />
        </Navbar.Text>
        <Nav>
          <Dropdown align="end">
            <Dropdown.Toggle variant="success">
              <FaShoppingCart color="white" fontSize="24px" />
              <Badge>7</Badge>
            </Dropdown.Toggle>
            <Dropdown.Menu style={{ minWidth: 370 }}>              
                  <Link to="/lorem">
                    <Button style={{ width: "95%", margin: "0 10px" }}>
                      Go To lorem
                    </Button>
                  </Link>
            </Dropdown.Menu>
          </Dropdown>
        </Nav>
      </div>
    </Navbar>
  );
};

export default Header;

Chakra UI is my Favourite styling Library after Material UI and React-bootstrap. Chakra UI is a simple, modular and accessible components library that gives the building blocks needed to build react application. The use case and implementation of Chakra UI is quite different from the UI libraries discussed above Frist after installation, the app component inside the index.js file need to be wrapped with a Chakra Provider.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { ChakraProvider } from "@chakra-ui/react"; // ChakraProvider


ReactDOM.render(
  <React.StrictMode>
<ChakraProvider>
    <App />
      </ChakraProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

The chakraProvider will enable the CSS styling to be effective in all Chakra UI components The components provided by Chakra UI is similarly named with some CSS properties. Example of code below.

import { Flex, Box, Text, Button } from "@chakra-ui/react";
import Link from "next/link";
const Header= () => (
  <Flex
    flexWrap="wrap"
    justifyContent="center"
    alignItems="center"
    m="5"
    flexDirection="column"
  >
    <img src={imgUrl} width={700} height={300} alt="banner" />
    <Box p="5">
      <Text color="lime" fontSize="lg" fontWeight="medium">
lorem      </Text>
      <Text color="black" fontSize="md" fontWeight="bold">
        Long text
      </Text>
      <Text
        color="gray.500"
        fontSize="lg"
        paddingTop="3"
        fontWeight="medium"
      ></Text>
      <Button fontSize="xl" bg="lime" color="white">
        <Link href={linkname}>buttonText</Link>
      </Button>
    </Box>
  </Flex>
);

export default Header;

Other UI libraries that is worth mentioning includes

  • Semantic UI
  • Fluent UI and
  • Gronmet .
JavaScriptjavascript frameworkjavascript modulesReactWeb Development