wizard-input-integer

What is it?

It is a number input component that is very flexible for you to customize or use.

Usage

import inputInteger from '@emmyb/input-integer'
//or
const inputInteger = require("@emmyb/input-integer");

This function returns an el for you to append to the DOM and the input element rendered on screen itself.

---

You can pass in options such as:

const {
    min = 0,  //number
    max = 1000, //number
    theme, //the appearance of the input
    label = "Input Integer", //the label of the input
    inputId = "Input-Integer", //input element id. Useful for the label element
    step = "0" //step attribute for incrementing the value of the input
  } = options;

Theming

You can change the appearance of the input either using the two themes 'light' and 'dark' provided by default or you can add yours.

// theme
const { light } = require("@emmyb/input-integer/src/theme/"); //or {dark}

You can create yours as was done here on stackblitz.

Event Listeners

There are some default event listeners handled for you to ensure min and max are respected.You can add event listeners to the component by passing an ON object to the componenet instance.

import inputInteger from '@emmyb/input-integer'
//or
const inputInteger = require("@emmyb/input-integer");

const {
    min = 0,  //number
    max = 1000, //number
    theme, //the appearance of the input
    label = "Input Integer", //the label of the input
    inputId = "Input-Integer", //input element id. Useful for the label element
    step = "0" //step attribute for incrementing the value of the input
  } = options;
  
const on = {
  keyup: (e) => {  },
};
const priceComponent = inputInteger(options, on)

Display in the browser

const app = document.createElement("div");
app.append(ageInput, birthInput);
document.body.appendChild(app);