# Common

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

<div align="left"><img src="https://2639330375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLkPk1F4Fa-pDNbNW3-%2F-MWbYBsnHYIMrkP3cu-b%2F-MWbcxZBrerDIs0qIsXT%2FScreen%20Shot%202021-03-25%20at%2011.27.58.png?alt=media&#x26;token=63e31f7f-8805-4659-ae42-7b4a8c748dff" alt=""></div>

### 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](https://qasir-ui.qasir.xyz/) or [Material UI](https://v4.mui.com/). You can also **create pure components** that you want without overriding other component design systems.&#x20;

```jsx
// 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](https://material-ui.com/), namely `makeStyles`.&#x20;

```jsx
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`

```jsx
import Button from '@/common/Button';
```