react-custom-alert

• Easy to set up and call alert function like calling a hook.
• light weight. (gzipped : 1.3KB)
• customize alert component.
• support to next.js(server-side-rendering).

Installation

npm

$ npm install react-custom-alert

yarn

$ yarn add react-custom-alert

Example

import React from 'react';
import { ToastContainer, toast } from 'react-custom-alert';
import 'react-custom-alert/dist/index.css'; // import css file from root.

function RootComponent() {
  return (
    <>
      <App />
      {/* Add ToastContainer from your root component. */}
      {/* If you use next.js, add it to app.js */}
      {/* If no floatingTime, the default is 3000ms. */}
      <ToastContainer floatingTime={5000} />
    </>
  );
}

function App() {
  // toast methods : info | success | warning | error
  const alertInfo = () => toast.info('info');
  const alertSuccess = () => toast.success('success');
  const alertWarning = () => toast.warning('warning');
  const alertError = () => toast.error('error');

  return (
    <div>
      <button onClick={alertInfo}>Info</button>
      <button onClick={alertSuccess}>Success</button>
      <button onClick={alertWarning}>Warning</button>
      <button onClick={alertError}>Error</button>
    </div>
  );
}

Guide

ToastContainer

| Prop name | Description | type | default value | |----------------|----------------------------------------------|----------------------------------|---------------| | containerStyle | Upper element style that contains toast list | undefined | React.CSSProperties | undefined | | floatingTime | Time to expose default toast(ms) | undefined | number | 3000 | | toastStyle | Default toast style to override | undefined | React.CSSProperties | undefined |

toast

Toast has four methods(info, success, warning, error).

Each method has the same type as the table below.

type ToastMethods = (message: string, options?: ToastOptions) => void;

| Toast options | Description | type | default value | |---------------|------------------------------------|----------------------------------|---------------| | floatingTime | Time to expose specific toast(ms) | undefined | number | undefined | | toastStyle | Specific toast style to override | undefined | React.CSSProperties | undefined |