Package Exports

custom-input-npm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (custom-input-npm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

What is this?

Create input with cross button by id.

Installation

npm i custom-input-npm

Usage

import { inputWithCross } from 'custom-input-npm';

  inputWithCross({
     id: 'input',
     inputStyles: {
       backgroundColor: 'red'
     },
     parentId: 'root',
     onClick: () => {},
     onFocus: () => {},
     onBlur: () => {},
     onChange: () => {},
     onEnter: () => {},
     withDropdown: true,
     dropDownProps: {
       options: ['yes', 'no', 'hmm'],
       styles: {},
     },
  });

To change cross button style pass in props crossStyle obj.

import { inputWithCross } from 'custom-input-npm';

  inputWithCross({
     id: 'input',
     crossStyle: {
       lineStyle: '1px solid red',
       height: '12px',
       positionRight: '10px',
       positionTop: '20%',
     },
     parentId: 'root',
  });

To add dropdown to input add prop withDropdown and dropDownProps there must be options an array if it empty dropdown will not shown.

import { inputWithCross } from 'custom-input-npm';

  inputWithCross({
     id: 'input',
     parentId: 'root',
     withDropdown: true,
     dropDownProps: {
       options: ['yes', 'no', 'hmm'],
       styles: {},
     },
  });

Options

id - string (without #),
parentId - string (without #),
inputStyles- object with styles for input,
crossStyle- object with styles for cross button,

crossStyle properties: lineStyle, height, positionRight, positionTop, all should be strings.

onClick - function,
onFocus - function,
onBlur - function,
onChange - function,
onEnter - function,
withDropdown- boolean to show dropdown,
dropDownProps- object with options and styles for dropdown,

dropDownProps properties: options an array, styles an object.