alert-lmh
v1.0.26
Published
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.
Downloads
40
Maintainers
lmhcomp3000Readme
alert-lmh
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.
Contact
Questions or feedback can be sent to [email protected]
Instalation
$ npm install alert-lmhor download the package from
Usage
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>In your HTML code...
<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.
Example with timer attribute set to 3000 miliseconds
<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>Example with modal attribute
<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>Another example with cancel and action buttons
<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>How to change the inner parts' style of an alert
<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>