1.0.14 • Published 3 years ago
custom-input-npm v1.0.14
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.