OptKit.com
optkit is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
npm install --save optkit
Usage: Javascript (assumes es module)
import OptKit from 'optkit';
let optKit = new OptKit({target:document.body});The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element').
You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI.
Usage: Legacy Javascript
Below you can see how to use the component with vanilla js.
<head>
<script src="https://unpkg.com/optkit@latest/index.js"></script>
</head>
<body>
<script>
let optKit = new OptKit({target:document.body})
</script>
</body>Usage: Web Component (aka. Custom Element)
You can use it as a web component.
<head>
<script src="https://unpkg.com/optkit@latest/index.js"></script>
</head>
<body>
<opt-kit />
</body>Svelte Component
<script>
import OptKit from 'optkit';
</script>
<OptKit/>How To Use
const testAlert = () => alert("alert.");
const testPrompt = async () => {
let answer = await prompt("prompt?");
if (answer) alert(answer);
};
const testConfirm = async (_) => {
let confirmed = await confirm("confirmed?");
if (confirmed) alert(confirmed);
};
const openMenu = async (event) => {
menu(event, [
{ label: "testAlert()", onClick: testAlert },
{ label: "testPrompt()", onClick: testPrompt },
{ label: "testConfirm()", onClick: testConfirm },
]);
}; <button on:click={openMenu}>
menu()
</button>