Skip to content

Latest commit

 

History

History
155 lines (115 loc) · 3.18 KB

README.md

File metadata and controls

155 lines (115 loc) · 3.18 KB
Raw

React-Toast-Notify

React Toast Component

Online Demo

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.