react-modal-alert
v1.2.6
Published
react-modal-alert
Downloads
30
Maintainers
Readme
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}))
});