Alert-lmh NPM | npm.io

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 alertlmh@gmail.com

Instalation

$ npm install alert-lmh

or download the package from

JSDELIVR

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;

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>

alert modal popup confirm prompt dialog box animated light web component zero-dependency

24 days ago

24 days ago

25 days ago

25 days ago

27 days ago