Easliy use react alert and customize
npm install 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).
``sh`
$ npm install react-custom-alert
`sh`
$ yarn add react-custom-alert
`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 |