TextInput

Example Usage

<div class='ui-text-input-example' style='width: 200px;'></div>
// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const myInput = new UI.TextInput('.ui-text-input-example', {
  icon: 'X',
  placeholder: 'What up?',
  submitHandler() {
    console.log('the enter key has been pressed!');
  }
});

myInput.subscribe((value) => {
  console.log("the current value is: ", value);
});

// Render the DOM for the TextInput component
myInput.render();

params

NameTypeDefaultDescription
elstringundefinedA string of the selector for the element to put the component in
optsobject{}A catch all for various options. See the opts table below for options specific to this component.

opts

NameTypeDefaultDescription
iconhtml'x'The markup for the icon to display
placeholderstring''The placeholder text for the input
submitHandlerfunction() => {}The function to execute when enter is pressed
waitnumber300The milliseconds to wait for the debounce