Awesome

preact-nominal-allocator

Installation

npm i preact-nominal-allocator

Usage

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Preact Nominal Allocator Demo</title>
    <script type="module" defer>
      import { Component, render, h } from "https://unpkg.com/preact@10.6.4?module";
      import htm from "https://unpkg.com/htm?module";
      import preset from "https://unpkg.com/jss-preset-default@10.9.0";
      import { create } from "https://unpkg.com/jss@10.9.0";
      import NominalAllocator from "./js/out.js";

      const html = htm.bind(h);
      const jss = create(preset());

      const style = {
        allocatorContainer: {
          display: "flex"
        },
        allocatorButtonPlus: {
          fontSize: 18
        },
        allocatorButtonMinus: {
          fontSize: 18
        },
        allocatorNumberInput: {}
      };

      const { classes } = jss.createStyleSheet(style).attach();

      render(
        html`
            <${NominalAllocator}
              min="${0}"
              max="${12}"
              onUpdate="${console.log}"
              styles="${classes}"
            />
        `,
        document.body
      );
    </script>
  </head>
  <body></body>
</html>

Notes

Attributes:
- min lowest input value
- max highest input value
- onUpdate used to update the current value

NominalAllocator inserts inline classes via JSS. It allows users to customize its style (via styles attribute) by adjusting classes like .allocatorContainer,.allocatorButtonPlus, .allocatorButtonMinus, and .allocatorNumberInput.

Contributing

$ git clone git@github.com:TimDaub/preact-nominal-allocator.git
$ cd preact-nominal-allocator
$ npm i
$ npm run dev

Changelog

0.0.2 on Feb 7, 2022

Add disabled prop

0.0.1 on Jan 10, 2022

Initial release

License

See LICENSE file or package.json.