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>

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i optkit

      DownloadsWeekly Downloads

      1

      Version

      0.1.6

      License

      none

      Unpacked Size

      136 kB

      Total Files

      9

      Last publish

      Collaborators

      • avatar