Skip to content

Custom push notification (Toast) implementation under React + stayed by TailwindCSS.

License

Notifications You must be signed in to change notification settings

damikun/React-Toast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

82c457c · Mar 7, 2021

History

46 Commits
Dec 17, 2020
Dec 3, 2020
Dec 16, 2020
Dec 3, 2020
Dec 16, 2020
Dec 16, 2020
Dec 16, 2020
Dec 7, 2020
Dec 3, 2020
Dec 16, 2020
Mar 7, 2021
Dec 16, 2020
Dec 6, 2020
Dec 16, 2020
Dec 16, 2020
Dec 3, 2020
Dec 16, 2020
Dec 3, 2020
Dec 16, 2020

Repository files navigation


React-Toast-Notify

React Toast Component

Description

This is custom toast component implemented by react hooks + React Context API and stayled using tailwindCSS framework. Feel free to inspirate by implementation :) This is trim of my UI lib that i use for my projects.

This componnent allow to push notifications to user screen and auto remove it after set or default time..

Example implements this push-Events:

  • Info
  • Error
  • Warning
  • Success
  • Custom body

Concepts

  • Responsive
  • Using Hooks and Context API
  • Using Tailwind and Fontawesome (All can be adjusted by endpoint user)

Installation

(!!! Package is not available on npm !!!)

  1. Clone the repo
    git clone https://github.com/damikun/React-Toast.git
  2. Restore packages
    yarn install
    
  3. Build and run demo
    yarn run start
    

Configuration API

Toast Provider

  • Usually placed in Providers.tsx or on top of App.tsx
  • Give you access to toast
  • In this example toast are send from "HomePage"
<ToastProvider variant={"top-right"}>
  <Layout>
    <HomePage />
  </Layout>
</ToastProvider>

Use hook to access toast actions

// Custom hook to access default context
const toast = useToast();
// OR
// Use of concrete conetxt
const toast = useContext(ToastContext);

Example:

export default function HomePage() {
  const toast = useToast();

  return (
    <div>
      <StayledButton
        variant="primaryred"
        onClick={() => toast?.pushError("Oppps Error", 5000)}
      >
        Error
      </StayledButton>
    </div>
  );
}

Various types to push

toast?.pushError("Error messgae", 5000);
toast?.pushWarning("Warning message"); // Default timeValue
toast?.pushSuccess("Success message");
toast?.pushInfo("Info Message");
toast?.push("Message", "Info", 2000);
toast?.pushCustom(<ToastCustomMessage />, 2000);
toast?.pushError("Error messgae", 5000, "truncate-2-lines");

Predefined types (can be extended)

type TostMessageType = "Info" | "Success" | "Warning" | "Error";

Support message truncate trim

type Truncate = "truncate-1-lines" | "truncate-2-lines" | "truncate-3-lines";

Pass any custom React.ReactNode component to body

toast?.pushCustom(<ToastCustomMessage />, 2000);
toast?.pushCustom(<div>My custom body</div>, 2000);

Various toast position

<ToastProvider variant={"top-right"}>
 // ...
</ToastProvider>

type Position "top_right" | "top_middle" | "top_left" | "bottom_right" | "bottom_middle" | "bottom_left"

Other

For valid display check that your React "root" is flexible and fulscreen to support all browsers behaviour...

// public/index.html
<div class="flex h-full w-full" id="root"></div>

Doc

You can read setp-by-step tutorial if you wanna start from scratch. (Currently writting / Not finished).

License

This project is licensed with the MIT license.