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).

!toast-image

!toast-sample

Installation

$3

``sh
$ npm install react-custom-alert
`

$3

`sh
$ yarn add react-custom-alert
`

Example

`js
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 (
<>

{/ Add ToastContainer from your root component. /}
{/ If you use next.js, add it to app.js /}
{/ If no floatingTime, the default is 3000ms. /}


);
}

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 (



);
}
`

Guide

$3

| 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 |

$3

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

Each method has the same type as the table below.

`ts
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 |