https://github.com/TimDaub/preact-nominal-allocator

A preact mobile and desktop-ready UI component for adding and removing nominal values (e.g. for voting)
https://github.com/TimDaub/preact-nominal-allocator

Last synced: 2 months ago
JSON representation

A preact mobile and desktop-ready UI component for adding and removing nominal values (e.g. for voting)

• Host: GitHub
• URL: https://github.com/TimDaub/preact-nominal-allocator
• Owner: TimDaub
• Created: 2021-12-28T14:13:57.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-07T20:57:50.000Z (almost 3 years ago)
• Last Synced: 2024-10-20T14:29:52.393Z (3 months ago)
• Language: JavaScript
• Size: 133 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-preact - Preact Nominal Allocator - A numerical input element that can also manipulated with two buttons (-/+). (Uncategorized / Uncategorized)

README

        
# preact-nominal-allocator

![](./assets/demo.gif)

## Installation

```bash

npm i preact-nominal-allocator

```

## Usage

```html

  

    

    Preact Nominal Allocator Demo

    

      import { Component, render, h } from "https://unpkg.com/[email protected]?module";

      import htm from "https://unpkg.com/htm?module";

      import preset from "https://unpkg.com/[email protected]";

      import { create } from "https://unpkg.com/[email protected]";

      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

      );

    

  

  

```

### Notes

- Attributes:

  - `min` lowest input value

  - `max` highest input value

  - `onUpdate` used to update the current value

    

`NominalAllocator` inserts inline classes via [JSS](https://cssinjs.org).  It

allows users to customize its style (via `styles` attribute) by adjusting

classes like  `.allocatorContainer`,`.allocatorButtonPlus`,

`.allocatorButtonMinus`, and `.allocatorNumberInput`.

## Contributing

```bash

$ git clone [email protected]: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.