UNPKG

1.8 kBMarkdownView Raw
1# Terra Search Field
2
3A search component with a field that automatically performs a search callback after user input.
4
5## Getting Started
6
7- Install with [npmjs](https://www.npmjs.com):
8 - `npm install terra-search-field`
9
10<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
11## Peer Dependencies
12
13This component requires the following peer dependencies be installed in your app for the component to properly function.
14
15| Peer Dependency | Version |
16|-|-|
17| react | ^16.8.5 |
18| react-dom | ^16.8.5 |
19| react-intl | ^2.8.0 |
20
21
22
23<!-- AUTO-GENERATED-CONTENT:END -->
24
25## Implementation Notes:
26
27The Searach-Field component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
28
29[1]: https://github.com/cerner/terra-core/tree/master/packages/terra-base/docs
30
31## Usage
32
33```jsx
34import React from 'react';
35import SearchField from 'terra-search-field';
36
37// Search Field with placeholder
38<SearchField placeholder="Search" />
39
40// Search Field with callback function and delay
41<SearchField searchDelay={500} onSearch={(searchText) => { console.log(searchText); }} />
42
43// Search Field with callback function and minimum search text length
44<SearchField minimumSearchTextLength={5} onSearch={(searchText) => { console.log(searchText); }} />
45
46```
47
48## Component Features
49* [Cross-Browser Support](https://github.com/cerner/terra-ui/blob/master/src/terra-dev-site/contributing/ComponentStandards.e.contributing.md#cross-browser-support)
50* [Responsive Support](https://github.com/cerner/terra-ui/blob/master/src/terra-dev-site/contributing/ComponentStandards.e.contributing.md#responsive-support)
51* [Mobile Support](https://github.com/cerner/terra-ui/blob/master/src/terra-dev-site/contributing/ComponentStandards.e.contributing.md#mobile-support)