Neophobe Plebeian Mumpsimus
    Wondering what’s next for npm?Check out our public roadmap! »

    optkit

    0.1.6 • Public • Published

    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>

    Keywords

    none

    Install

    npm i optkit

    DownloadsWeekly Downloads

    41

    Version

    0.1.6

    License

    none

    Unpacked Size

    136 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar