DEV Community: ma2web

Add more variant to Material-UI Typography

ma2web — Wed, 14 Jul 2021 16:24:28 +0000

Hey there,

You know that Material-UI Typography component has variant props that include 15 default types such as: h1 ~ h6, subtitle1, body1, and so on. you can see options here https://material-ui.com/api/typography/
now, if you want to add some more to your Typography component and have more design for it you must create a custom typography component like below.

this is MyTypography.tsx that is in my components directory.

import { TypographyProps, Typography } from '@material-ui/core'
import classNames from 'classnames'
import React, { ElementType, FC } from 'react'
import useMyTypographyStyle from './MyTypography.styles'

interface IMyTypography extends Omit<TypographyProps, 'variant'> {
  variant:
  | TypographyProps['variant']
  | 'h2Bold'
  | 'subtitle1Bold'
  component?: ElementType
}
const MyTypography: FC<IMyTypography> = (props) => {
  const classes = useMyTypographyStyle()
  const isCustom = Object.keys(classes).indexOf(props.variant) > -1
  return (
    <Typography
      {...props}
      variant={isCustom ? undefined : (props.variant as any)}
      className={
        isCustom
          ? classNames(classes[props.variant], props.className)
          : props.className
      }
    >
      {props.children}
    </Typography>
  )
}

export default MyTypography

In this case we made a component that it variant get undefined or default Material-UI Typography variant based on isCustom value and this value is the props when we pass to MyTypography component.
Also you must have a style file for add your design to your custom variants.

import { makeMyStyles } from 'theme'

const useMyTypographyStyle = makeMyStyles(
  ({ typography }) => ({
    h2Bold: { ...typography.h2, fontWeight: 700 },
    subtitle1Bold: { ...typography.subtitle1, fontWeight: 700 },
  }),
  { name: 'myTypography' },
)

export default useMyTypographyStyle

Thats it. we done it. now you have 17 values for your variant props and when you want to use Typography component you must use it like this

<MyTypography variant='h2Bold'>heading 2 with custom styles</MyTypography>
<MyTypography variant='subtitle1Bold'>subtutle 1 with custom styles</MyTypography>

get number of product in each category with mongodb aggregate

ma2web — Fri, 25 Jun 2021 08:18:16 +0000

In one project, the Android developer asked me to give me an API that can show product categories with the number of products in each category; the best way to create this API in MongoDB is to use the 'aggregate' operator.
This was my category schema.

const mongoose = require("mongoose");
const { s, rs, n, ref } = require("../utils/mongo");

var schema = new mongoose.Schema(
  {
    user: ref("user"),
    name: { ...rs, unique: true },
    description: s,
    image: s,
    view: {
      ...n,
      default: 0,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("category", schema);

and you can see my controller in below

module.exports = {
  getAll: async (req, res) => {
    await Category.aggregate([
        {
          $lookup: {
            from: "products",
            localField: "_id",
            foreignField: "categories",
            as: "products",
          },
        },
        {
          $project: {
            _id: 1,
            name: 1,
            products: { $size: "$products" },
            description: 1,
            view: 1,
            createdAt: 1,
            updatedAt: 1,
          },
        },
      ]).exec(function (err, result) {
        if (err) throw err;
        res.send(result);
      });
  },

and this is postman result

Animated SVG - GSAP

ma2web — Thu, 29 Oct 2020 15:44:17 +0000

I made an animated landing page with HTML, CSS and GSAP-(JavaScript animation library from GreenSock)

Codes, SVG file, Fonts, Adobe XD file and Affinity designer file are here:

https://gitlab.com/ma2web/svg-animated-with-gsap

hope be useful for you

React JS - Material UI Dashboard

ma2web — Thu, 08 Oct 2020 16:07:24 +0000

React admin panel created with React, Redux and using material-ui framework

Codes: https://gitlab.com/ma2web/material-ui-blue-sky