usetoast-example's Introduction

This project was bootstrapped with Create React App.

This is a simple example of how you can create your own toast using only hook/contextApi.

See the examples here - https://ricardocanelas.github.io/useToast-example

UseToast

props	type	params
toasts	array	-
getToasts	function	direction
addToast	function	props, direction, time
removeToast	function	id
clearToasts	function	-

Directions:

top
top-left
top-right
bottom
bottom-left
bottom-right.

Installing

In index.js add the providers

import React from "react";
import ReactDOM from "react-dom";
import { ToastProvider } from "./useToast";

import "./toaster.css";

ReactDOM.render(
  <ToastProvider>
    <App />
  </ToastProvider>,
  document.getElementById("root")
);

Using:

import React from "react";
import useToast from "./useToast";

const App = () => {
  const { addToast } = useToast();

  const handleClick = () => {
    addToast(
      { title: "This is a simple message", variant: "success" },
      "bottom",
      7000
    );
  };

  return (
    <div>
      <button onClick={handleClick}>Add Toast</button>
    </div>
  );
};

Customizing your toasts

props	type
DefaultToast	Component
maximum	number
portal	DOM Element

import React from "react";
import ReactDOM from "react-dom";
import { ToastProvider } from "./useToast";

const MyAlert = ({ props, remove, id }) => {
  return (
    <div>
      {id} - {props.title}
      <button onClick={handleClick}>Add Toast</button>
    </div>
  );
};

ReactDOM.render(
  <ToastProvider DefaultToast={MyAlert} maximum={5} portal={document.body}>
    <App />
  </ToastProvider>,
  document.getElementById("root")
);