Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@commercetools-uikit/search-text-input
Advanced tools
Readme
A controlled search text input component for single-line strings with validation states.
yarn add @commercetools-uikit/search-text-input
npm --save install @commercetools-uikit/search-text-input
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
import SearchTextInput from '@commercetools-uikit/search-text-input';
const Example = () => (
<SearchTextInput
value="foo"
onChange={(event) => alert(event.target.value)}
onSubmit={(val) => alert(val)}
onReset={() => alert('reset')}
/>
);
export default Example;
Props | Type | Required | Default | Description |
---|---|---|---|---|
id | string | Used as HTML id property. An id is auto-generated when it is not specified. | ||
autoComplete | string | Used as HTML autocomplete property | ||
aria-invalid | boolean | Indicate if the value entered in the input is invalid. | ||
aria-errormessage | string | HTML ID of an element containing an error message related to the input. | ||
name | string | Used as HTML name of the input component property. | ||
value | string | ✅ | Value of the input component. | |
onChange | ChangeEventHandler | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. | ||
onBlur | FocusEventHandler | Called when input is blurred | ||
onFocus | FocusEventHandler | Called when input is focused | ||
onSubmit | Function See signature. | ✅ | Handler when the search button is clicked. | |
onReset | Function See signature. | ✅ | Handler when the clear button is clicked. | |
isAutofocussed | boolean | Focus the input on initial render | ||
isDisabled | boolean | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | ||
isReadOnly | boolean | Indicates that the field is displaying read-only content | ||
hasError | boolean | Indicates if the input has invalid values | ||
hasWarning | boolean | Indicates if the input has warning values | ||
placeholder | string | Placeholder text for the input | ||
isClearable | boolean | true | Indicates if the input should be cleared when the clear button is clicked. Defaults to true. | |
horizontalConstraint | union Possible values: , 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto' | 'scale' | Horizontal size limit of the input fields. |
onSubmit
(searchValue: string) => void
onReset
() => void
data-*
propsThe component further forwards all data-
attributes to the underlying input
component.
SearchTextInput.isEmpty
Returns true
when the value is considered empty, which is when the value is empty or consists of spaces only.
SearchTextInput.isEmpty(''); // -> true
SearchTextInput.isEmpty(' '); // -> true
SearchTextInput.isEmpty('tree'); // -> false
FAQs
A controlled search text input component for single-line strings with validation states.
The npm package @commercetools-uikit/search-text-input receives a total of 1,721 weekly downloads. As such, @commercetools-uikit/search-text-input popularity was classified as popular.
We found that @commercetools-uikit/search-text-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.