![custom-toast.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615579665/custom_toast_5229291ab7.jpg)

In this post , we will create a Custom Toast/Snackbar  Notification Component in  React JS which will have different styling ❤️ depending upon variant. This is the third part of my **Custom UI Components With React series** 🥳. You can see the demo of what we are going to build in this tutorial [here](https://codesandbox.io/s/reverent-germain-iory5?file=/src/App.js). 

Here , in this tutorial , we are going take a different approach than other tutorials. In other tutorial we have created a React Functional components. But here we have to trigger the method to show toast notification which is part of this component from outside it . So instead of creating a component directly , we will create `useToast()` custom hook which will return two things
1. `openToast` -  a method to trigger opening of toast notification.
2. `ToastComponent` - the actual Toast Notification component.

Now going forward we will proceed as below:
1. Creating a fresh react app.
2. Making and designing our `useToast` custom hook.
3. A button to trigger an event to show Toast Notification.

# Creating a Fresh React App
Firstly , we will create a fresh react project with the help of `create-react-app` cli tool by using following command.
```
npx create-react-app modal
```

Let’s start the created app using `npm start` and open up your browser and go to `http://localhost:3000`. You’ll see react’s default app.
Now let's move on to the next step which is to designing and making of actual Modal component.

# Making and designing our useToast custom hook
Now , inside `src` folder of our app , we will create components folder. Inside this component folder , we will create a `toast.js` file for having our `useToast` hook and `toast.module.css` file having `css` styling for our Toast Notification component. 

Getting back to designing part, below is the code snippet for it.
```css
/* toast.module.css */

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  color: #111;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

.content {
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
}

.icon {
  height: 25px;
  width: 25px;
  margin-right: 10px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}


```
- `.snackbar` is the class which will have the styling for Toast component whic will be hidden initially.
-  `.content` and `.icon` are the classes which will have the styling for message text of Toast Notification and icon present in  it respectively.
-  `.snackbar.show`  class makes the Toast Notification visible with fade in effect which after 3s disappears with fade out effect.

Now let’s create `useToast` hook.
Below is the code snippet for it.

```jsx

//toast.js

import React, { useRef } from "react";
import ErrorIcon from "./icons/error";
import InfoIcon from "./icons/info";
import SuccessIcon from "./icons/success";
import WarningIcon from "./icons/warning";
import styles from "./toast.module.css";

const useToast = (message, variant = "success", style = {}) => {
  const toastRef = useRef(null);
  const openToast = () => {
    toastRef.current.classList.add(styles.show);
    setTimeout(function () {
      toastRef.current.classList.remove(styles.show);
    }, 3000);
  };
  let toastStyle, icon;
  switch (variant) {
    case "success":
      toastStyle = {
        backgroundColor: "#adebad",
        borderTop: "5px solid #2db92d"
      };
      icon = <SuccessIcon className={styles.icon} fill="#2db92d" />;
      break;
    case "error":
      toastStyle = {
        backgroundColor: "#ffcccc",
        borderTop: "5px solid #ff0000"
      };
      icon = <ErrorIcon className={styles.icon} fill="#ff0000" />;
      break;
    case "info":
      toastStyle = {
        backgroundColor: "#ccf2ff",
        borderTop: "5px solid #33ccff"
      };
      icon = <InfoIcon className={styles.icon} fill="#33ccff" />;
      break;
    case "warning":
      toastStyle = {
        backgroundColor: "#fff0b3",
        borderTop: "5px solid #ffcc00"
      };
      icon = <WarningIcon className={styles.icon} fill="#ffcc00" />;
      break;
    default:
      break;
  }
  const ToastComponent = () => (
    <React.Fragment>
      <div
        ref={toastRef}
        className={styles.snackbar}
        style={{ ...toastStyle, ...style }}
      >
        <div className={styles.content}>
          {icon}
          {message}
        </div>
      </div>
    </React.Fragment>
  );
  return { openToast, ToastComponent };
};

export default useToast;


```
This custom hook will take three parameters:
1.message - Which is a required parameter , which indicates message to show inside this toast notification.\
2. variant - Which will have value one of `'success | warning | error | info`.Depending upon this the styling of notification will be different.This is optional parameter with default value of `success`.\
3. style -  It will have any custom styles that user want to apply to Notification.This is optional parameter with default value of empty object.\

Here , inside this hook we have used four more component InfoIcon,SuccessIcon,WarningIcon and Errorcon , all of which are just simply  `svg` icons.

This component has two main functional parts
1. Correct Styling - Firstly , we will use javascript `swicth` statement to check what is the variant of the toast notification and according to that we will decide the which styling to apply and which icon to render inside this toast notification.\
2. `openToast()` - After that we will implement the method inside this hook to open a toast notification. Inside this method , we will add the `.show` class to toast with the help of `useRef()` to make it visible and after 3 seconds we will remove that class from toast with help of `setTimeout()` so that notification will disappear after 3 seconds.\ 

Now , we will create a ToastComponent inside this hook as shown in above code snippet. After that lastly , we will return the `ToastComponent` and `openToast` from this hook.\
Now , we will see how we can trigger this toast notification with the help of button.

# A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,
```jsx

//App.js

import React from "react";
import useToast from "./components/toast";
import "./styles.css";

export default function App() {
  const { openToast, ToastComponent } = useToast(
    "This is my notification.",
    "success"
  );
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh"
      }}
    >
      <button onClick={() => openToast()}>Show Snackbar </button>
      <ToastComponent />
    </div>
  );
}


```

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project.We have made a simple , customizable ,beautiful and most important reusable Toast Notification Component.
This is link to [CodeSandbox](https://codesandbox.io/s/reverent-germain-iory5?file=/src/App.js)  of Toast component.
Let me know if this tutorial was helpful for you guys and for which case you used it.If you have any queries you can contact me through my email or other social media platforms.

thumbnail_custom-toast.jpg

custom-toast.jpg

In this post , we will create a Custom Toast/Snackbar  Notification Component in  React JS which will have different styling ❤️ depending upon variant. This is the third part of my Custom UI Components With React series 🥳.

😎Build Custom Toast Notification Component In React With Different Variants

- ![custom-modal.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615580227/custom_modal_5c6ff2a4f1.jpg)

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework. This is the second part of my series **Build Custom UI Components With React**. Below is the demo 😍 of what we will build going towards the end of this tutorial - very beautiful and fully customizable Modal Component.

![modal-demo.gif](https://res.cloudinary.com/dh1srz69c/image/upload/v1615614965/modal_demo_17b918a948.gif)


We will proceed as below:
1. Creating a fresh react app.
2. Making and designing our Modal component.
3. A button to trigger an event to show Modal.

# Creating a Fresh React App
Firstly , we will create a fresh react project with the help of `create-react-app` cli tool by using following command.
```
npx create-react-app modal
```

Let’s start the created app using `npm start` and open up your browser and go to `http://localhost:3000`. You’ll see react’s default app.
Now let's move on to the next step which is to designing and making of actual Modal component.

# Making and designing our Modal component
Now , inside src folder of our app , we will create components folder. Inside this component folder , we will create a modal folder which will have `Modal.js` file for having modal  component and `modal.module.css` file having css styling for our Modal component. 

Getting back to designing part, below is the code snippet for it.
```css
/* modal.module.css */

.modal__wrap {
	position: fixed;
	display: block;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	overflow-x: hidden;
	background-color: rgba(31, 32, 41, .75);
	pointer-events: none;
	opacity: 0;
	transition: opacity 250ms 700ms ease;
}

.visible {
	pointer-events: auto;
	opacity: 1;
	transition: all 300ms ease-in-out;
}

.modal {
	overflow-y: scroll;
	overflow-x: hidden;
	position: relative;
	display: block;
	width: 60vw;
	height: 60%;
	min-height: 400px;
	min-width: 400px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 4px;
	padding-bottom: 20px;
	background-color: #fff;
	align-self: center;
	box-shadow: 0 12px 25px 0 rgba(199, 175, 189, .25);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
	transform: scale(0);
}

.visible .modal {
	opacity: 1;
	transform: scale(1);
	transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}

```
- `.modal__wrap` is the class which will have the styling for wrapper and backdrop of the modal.
-  `.modal` is the class which will have the styling of actual Modal component which will be hidden initially.
-  `.visible`  class makes the Modal visible with fade in and fade out effect.

Now let’s create Modal component.
Below is the code snippet for it.

```jsx
//Modal.js

import React, { useEffect, useRef } from 'react';
import Button from '../button/Button';
import CloseIcon from '../CloseIcon';
import styles from './modal.module.css';

const Modal = ({ modalStyle, children, show, onClose, backdropStyle }) => {
	const modalRef = useRef(null);
	useEffect(
		() => {
			if (show) {
				modalRef.current.classList.add(styles.visible);
			}
			else {
				modalRef.current.classList.remove(styles.visible);
			}
		},
		[
			show
		]
	);
	return (
		<React.Fragment>
			<div ref={modalRef} style={backdropStyle} className={`${styles.modal__wrap}`}>
				<Button
					onClick={onClose}
					style={{ width: 60, height: 40, position: 'absolute', top: 0, right: 0, margin: '1rem' }}
					className={styles.close__btn}
				>
					<CloseIcon height="20px" width="20px" className={styles.close__icon} />
				</Button>
				<div style={modalStyle} className={styles.modal}>
					{children}
				</div>
			</div>
		</React.Fragment>
	);
};

export default Modal;

```
This component will take four props:
1.`modalStyle` - With which one can customize the styling of visible modal window.\
2. `backdropStyle` - With which one can customize the styling of the backdrop of modal window.\
3. `onClose` -  Event handler with which one can write logic to close the modal.\
4. `show` - Boolean property which will decide wheather the modal is open or not.\

Here , inside this component we have used two more component [Button](https://satishnaikawadi.me/posts/build-custom-button-component-with-react-js) and CloseIcon. Now Button component is a reusable UI component which we have build in first part of this series tutorial link  for which is [here](https://satishnaikawadi.me/posts/build-custom-button-component-with-react-js). CloseIcon is just simply a `svg` icon to close the modal.

This component has two main functional parts
1. Firstly , inside `useEffect()` hook we will check if the show prop is true or not. If show is true , then we will add the `.visible` class to the component  or else we will remove the `.visible` class from the Modal component with the help of `useRef()` react hook.
2. We will add `onClose()` handler passed by props to the `onClick` event handler of CloseIcon , so that modal will close on clicking it.

# A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,
```jsx

//App.js

import React, { useState } from 'react';
import './App.css';
import Button from './components/button/Button';
import Modal from './components/modal/Modal';

function App() {
	const [
		show,
		setShow
	] = useState(false);
	return (
		<React.Fragment>
			<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
				<Button onClick={() => setShow(true)}>Open Modal</Button>
			</div>
			<Modal show={show} onClose={() => setShow(false)}>
				<div className="content">
					<img src="https://cdn.pixabay.com/photo/2015/01/09/11/11/office-594132__340.jpg" alt="Developer" />
					<div className="text">
						<h2>John Doe</h2>
						<p>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe aliquid placeat omnis
							adipisci dolores quae amet mollitia sint, temporibus eum magnam facilis odio ex incidunt?
							Deleniti quam et rem obcaecati. Laborum atque odit expedita nulla.
						</p>
						<p>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore laborum, assumenda
							dolorum provident quod itaque earum, officia in placeat dignissimos nostrum? Totam corrupti
							nihil repudiandae ducimus atque quod eos!
						</p>
					</div>
				</div>
			</Modal>
		</React.Fragment>
	);
}

export default App;


```

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project.
This is link to [CodeSandbox](https://codesandbox.io/s/cocky-morse-uvern)  of Modal component.
Let me know if this tutorial was helpful for you guys and for which case you used it.

thumbnail_custom-modal.jpg

custom-modal.jpg

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework.

💪 Build Custom Modal/Popup Component In React JS

![1.Buttons.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615438576/1_Buttons_6f58501ecb.jpg)

This is the first part of many 🛎️ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.

Below is the demo of what we are going to build in this tutorial.

![btn-demo.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615440700/btn_demo_50096e523e.jpg)

##  ✔️ Button Component Props
We are going to have several props for this component so that we can have control on it from outside to how we can customize or modify it.The props will be as follows  - 

- btnColor - This props will decide the color of the button. 
- labelColor - This props will decide the color of text inside the button. By default it will be `white`, but depending on your `btnColor` you can change it to have right contrast.
- onClick - This  will be a `onClick` handler present on button. 
- type - This prop will decide the styling of the button. It will have the value either one of `outline | block | rounded`. If this prop is not passed button will have default styling.
- style - This prop will have any custom styling you want to give Button component from outside.
- disabled - This prop will decide if the button is in active state or not.


## 🃏Basic Styling Of Button
We will give button some basic styling. Here we will create `button.module.css` file and then we will add `btn` class to it for giving some basic styles to our button as follows.

```css

/* button.module.css */

.btn {
	font-family: 'Ubuntu', sans-serif;
	position: relative;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 2;
	height: 50px;
	transition: all 200ms linear;
	border-radius: 4px;
	width: 240px;
	letter-spacing: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	align-self: center;
	border: none;
	cursor: pointer;
	box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .25);
	outline: 0;
	text-transform: capitalize;
}
```

## 💠 Creating Button Functional Component

Now we will create a `Button.js` files in which we will create out custom Button Component. In this file we will import `styles` from our `button.module.css` file . Here we will return a basic HTML `button` element and we will add `btn` class to it from `styles`.We will destructure the all props.

```jsx
//Button.js

import React from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
	return (
		<button
			className={styles.btn}
		>
			{children || 'label'}
		</button>
	);
};

export default Button;

```
Now in this  `Button.js` file we will create some styles objects for different types of buttons.
```js

//Button.js

	const commonStyles = {
		backgroundColor : btnColor,
		color           : labelColor || 'white'
	};
	const outlineStyles = {
		border          : `1px solid ${btnColor}`,
		color           : btnColor,
		backgroundColor : 'white'
	};
	const outlineHoverStyle = {
		color           : labelColor || 'white',
		backgroundColor : btnColor
	};

	const roundedStyle = {
		backgroundColor : btnColor,
		color           : labelColor || 'white',
		borderRadius    : '25px'
	};
	const disabledStyle = {
		cursor          : 'default',
		backgroundColor : btnColor,
		color           : labelColor || 'white',
		opacity         : 0.4
	};
	const blockStyles = {
		width  : '95%',
		margin : '0 auto'
	};
```
Here we have common styles depending on `btnColor` which will be added to every type of  button . On the other hand all the other styles will be added conditionally depending on the `type` of button. Here note that for `outline` type we have two cases - first is default outlineStyles which will be added when type of button is outline and the other case is when we hover over the button.

So to track the hover state we will create `state` hover with `useState()` [react hook](https://reactjs.org/docs/hooks-intro.html) with which we will add hover style conditionally. With Javascript Event Handlers `onMouseEnter` and `onMouseLeave` we will toggle our `hover` state.

Now we will add a simple `switch` statement in javascript to conditionally render the styles depending on the type of button.
```javascript

//Button.js
	let btnStyle;
	switch (type) {
		case 'rounded':
			btnStyle = roundedStyle;
			break;
		case 'block':
			btnStyle = blockStyles;
			break;
		case 'outline':
			if (hover) {
				btnStyle = outlineHoverStyle;
			}
			else {
				btnStyle = outlineStyles;
			}
			break;
		default:
			btnStyle = {
				backgroundColor : btnColor,
				color           : labelColor || 'white'
			};
			break;
	}


```

And that's it , Now we will just add this `btnStyle` along with any `style` passed from props onto button and we will also add disabled style if button has `disabled` prop. So our final code will look like follows - 

```jsx

//Button.js

import React, { useState } from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
	const [
		hover,
		setHover
	] = useState(false);
	const toggleHover = () => {
		setHover(!hover);
	};
	const commonStyles = {
		backgroundColor : btnColor,
		color           : labelColor || 'white'
	};
	const outlineStyles = {
		border          : `1px solid ${btnColor}`,
		color           : btnColor,
		backgroundColor : 'white'
	};
	const outlineHoverStyle = {
		color           : labelColor || 'white',
		backgroundColor : btnColor
	};

	const roundedStyle = {
		backgroundColor : btnColor,
		color           : labelColor || 'white',
		borderRadius    : '25px'
	};
	const disabledStyle = {
		cursor          : 'default',
		backgroundColor : btnColor,
		color           : labelColor || 'white',
		opacity         : 0.4
	};
	const blockStyles = {
		width  : '95%',
		margin : '0 auto'
	};
	let btnStyle;
	switch (type) {
		case 'rounded':
			btnStyle = roundedStyle;
			break;
		case 'block':
			btnStyle = blockStyles;
			break;
		case 'outline':
			if (hover) {
				btnStyle = outlineHoverStyle;
			}
			else {
				btnStyle = outlineStyles;
			}
			break;
		default:
			btnStyle = {
				backgroundColor : btnColor,
				color           : labelColor || 'white'
			};
			break;
	}
	return (
		<button
			style={

					disabled ? { ...commonStyles, ...btnStyle, ...disabledStyle, ...style } :
					{ ...commonStyles, ...btnStyle, ...style }
			}
			onMouseEnter={toggleHover}
			onMouseLeave={toggleHover}
			{...props}
			type="button"
			onClick={

					!disabled ? onClick :
					() => {}
			}
			className={styles.btn}
		>
			{children || 'button'}
		</button>
	);
};

export default Button;

```
[Here](https://codesandbox.io/s/zealous-chaum-3jmi5?file=/src/components/Button.js) you can see live demo and interact with this component.
Hope you inderstand this tutorial . Thank You for reading 😇.

large_1.Buttons.jpg

medium_1.Buttons.jpg

small_1.Buttons.jpg

thumbnail_1.Buttons.jpg

1.Buttons.jpg

This is the first part of many 🛎️ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.

Blog Articles

#react

😎Build Custom Toast Notification Component In React With Different Variants

💪 Build Custom Modal/Popup Component In React JS

🤩 Build Custom Button Component With React JS