A light and simple but stylizable and animated dialog box that allows you to insert any html code into its tags it has customizable cancel and accept buttons and an auto close timer.
Questions or feedback can be sent to alertlmh@gmail.com
$ npm install alert-lmhor download the package from
In React...
//...here the rest of your code
//...
import "alert-lmh";
import { useRef } from "react";
function App() {
const alertRef = useRef(null);
function handleClick() {
alertRef.current.show();
}
return (
<div className="App">
//...here the rest of your code
<alert-lmh ref={alertRef}>Testing alert</alert-lmh>
<button onClick={handleClick}>Show alert</button>
//...here the rest of your code
</div>
);
}
export default App;or
In your plain html file...
- download the package (unzip it), copy the folder to your project
- and insert the following code:
<script src="./alert-lmh/src/alert-lmh.js"></script><button onclick='simpleAlert.show()'>
Show alert
</button>
<alert-lmh id='simpleAlert' style='display: none'>
This is the simplest alert
</alert-lmh>- 'display: none' is preferable to avoid initial flickering.
- 'id' attribute is necessary in order to be called by the method show().
- By default, if a timer is not defined, it will auto close in 1500ms.
<button onclick='myAlert.show()'>
Show alert
</button>
<alert-lmh id='myAlert' timer=3000 style='display: none'>
This alert will close in 3 seconds.
</alert-lmh><button onclick='myAlert.show()'>
Show alert
</button>
<alert-lmh id='myAlert' modal='yes' style='display: none'>
This alert will show like a modal
</alert-lmh><button onclick='anotherAlert.show()'>
Show alert
</button>
<alert-lmh
id='anotherAlert'
action-button="Ok"
action="functionName()"
cancel-button="cancel"
style='display: none'
>
This is a dialog box
</alert-lmh>
<script>
function functionName() {
console.log('here you write the code you wish')
console.log('The function name may be different')
}
</script><head>
<style>
#stylizedAlert::part(dialog-box) {
background-color: AntiqueWhite;
}
#completeAlert::part(nav-bar) {
bottom: 2vh;
}
#completeAlert::part(buttons) {
background-color: Coral;
}
</style>
</head>
<body>
<alert-lmh id='stylizedAlert' style='display: none'>
Alert width inner parts stylized
</alert-lmh>
</body>