1 | # Terra Search Field
|
2 |
|
3 | A 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 |
|
11 | ## Peer Dependencies
|
12 |
|
13 | This 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 |
|
24 |
|
25 | ## Implementation Notes:
|
26 |
|
27 | The 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
|
34 | import React from 'react';
|
35 | import 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)
|