React-modal-alert NPM

React-Modal-Alert

react-modal-alert library.

Demo

Installation

Install it from npm (using NPM).

npm i --save react-modal-alert

or:

yarn add react-modal-alert

Usage

Using react modal alert hook!!

import React, { useState } from 'react';
import  {useModalAlert}  from 'hooks/useModalAlert';

function Page() {
    const { AlertContainer, modalAlert, setIsStart } = useModalAlert();
    const onClick = async () => {
        modalAlert({
          body: <div>custom body</div>,
          button: <div onClick={()=>setIsStart(false)}>custom button</div>
        });
    };
  return (
    <div>
      <div>
        <button type='button' onClick={onClick}>
          modal-alert-test-button
        </button>
      </div>
      {AlertContainer({
        isFirstRender: true,
        autoClose: 3000,
        body: <div>React-modal-alert Hook!!</div>,
        alertStyle: { borderRadius: '8px' },
      })}
    </div>
  );
}

Options

   AlertContainer({
    body: null || <div></div> || <BodyComponent />, //default: null(required)
    isFirstRender?: true | false, //default: false
    autoClose?: 3000, //default null
    button?: null || <div></div> || <ButtonComponent />, //default: null
    alertStyle?: {height:300,width:300},  //inline css styles,
    containerStyle?: {position: 'fixed'}, //inline css styles,
    zIndex?: 999, // default: 999
    backGroundColor?: '#020202' //default: rgba(0, 0, 0, 0.5)
   })

    modalAlert({
      body?:  null || <div></div> || <BodyComponent />, //default: parent (AlertContainer({body}))
      button?: null || <div></div> || <ButtonComponent />,  //default: parent (AlertContainer({button}))
      autoClose?: null,  //default: parent (AlertContainer({autoClose}))
    });