Common

The place to create local components that are common in the app project.

How to use

If you are going to create a global component that applies only to the project then you can use this method.

Step 1: Set up component

The first step you have to create a component folder in ./src/components/common. With the file structure as below.

Step 2: Component code

index.js used to place the root function component in which there are props and rendering elements. Here we use override button component with Qasir UI or Material UI. You can also create pure components that you want without overriding other component design systems.

// Vendors
import React from 'react';

// Qasir UI
import Button from 'qasir-ui/inputs/Button';

// Styles
import ButtonStyled from './style';

const Button = () => {
  const classes = ButtonStyled();
  return <Button className={classes.root}>Hello World</Button>;
};

export default Button;

Step 3: Component style

style.js used to style the component. Here we use one of the function styles from Material UI, namely makeStyles.

import { makeStyles } from '@material-ui/core/styles';

const ButtonStyled = makeStyles(() => ({
  root: {
    backgroundColor: 'blue',
    width: '100%',
    borderRadius: 10,
  },
}));

export default ButtonStyled;

Step 4: Import component

We use aliases for component usage, code as shown below. You can check aliases configs in jsconfig.json

import Button from '@/common/Button';