npm package: @licuido-ui/ui_search
Description: Search allows a user to search for specific information or data. The component typically includes an input field where the user can enter a search
Latest version: 2.0.2

# Search

Search allows a user to search for specific information or data. The component typically includes an input field where the user can enter a search

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link Search](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_search
```

## Import component

```jsx
import { Search } from '@licuido-ui/ui_search';
```

## Usage

```jsx
<Search options={[]} />
```

## Image

![alt text](./search.png)

## Sample Code

```jsx
<Search
  options={[
    { label: 'Redemption', id: 1 },
    { label: 'Random', id: 2 },
    { label: 'Godfather', id: 3 },
    { label: 'Dark Knight', id: 4 },
    {
      id: 1,
      label: 'The Redemption',
      url: 'https://images.unsplash.com/photo-1517630800677-932d836ab680?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
    },
  ]}
  variant={'isTextSearch'}
  paperRootStyle={{}}
  rootStyle={{ height: '60vh', width: '300px' }}
  noOptionsText={'No options'}
  inputRootStyle={{}}
  placeHolderText={'Search..'}
  placeHolderColor={'#929292'}
  placeHolderSize={12}
  inputFontSize={12}
  inputFontColor={'#393939dd'}
  inputBackgroundColor={''}
  inputBorderDefaultColor={'#E9E9E9'}
  inputBorderHoverColor={'#b4aef4'}
  inputBorderFocusColor={'#665CD7'}
  startAdornmentIcon={<SearchIcon />}
  endAdornmentIcon={<Close />}
  paperBackgroundColor={''}
  paperBorderColor={'#665CD7'}
  paperMinHeight={undefined}
  paperMaxHeight={undefined}
  listItemSubTextStyles={{}}
  listItemSubTextColor={'#E9E9E9'}
  listItemSubTextSize={12}
  listItemLabelStyles={{}}
  listItemLabelColor={'#393939dd'}
  listItemLabelSize={12}
  listTextHoverColor={'#665CD7'}
  listTextHoverBgColor={'#fdfafa'}
  keyDownListBgcolor={''}
  keyDownListTextColor={''}
  cardImgStyle={{}}
  cardImgWidth={30}
  cardImgHeight={30}
  imgBorderRadius={4}
  recentLabel={'Recent Search'}
  recentLabelTextColor={'#393939dd'}
  recentLabelFontSize={12}
  recentLabelStyle={{}}
  recentSearchItemStyles={{}}
  recentSearchItemTextColor={'#393939dd'}
  recentSearchItemBgcolor={'#E9E9E9'}
  recentSearchItemSize={10}
  controlsRootStyles={{}}
  controlsTextColor={'#393939dd'}
  controlsBgColor={'#E9E9E9'}
  controlsTextSize={12}
  componentColumnDirection={'column-reverse'}
  recentSearchLabelColor={'#393939dd'}
  recentSearchLabelSize={12}
  recentSearchLabel={'Recent Search'}
  categoryLabel1={' CATEGORY SUGGEST 1'}
  categoryLabel2={'CATEGORY SUGGEST 2'}
  primaryCategoryData={[]}
  secondaryCategoryData={[]}
  onSelectSearchDataFun={() => false}
  handleInputOnChange={() => false}
  handleOptionChange={() => false}
/>
```
## Sample Code

```jsx
<Search
  variant={'isSearchInput'}
  rootStyle={{ height: '60vh', width: '300px' }}
  inputWidth='100%'
  minExpandWidth='43px'
/>
```

## Props

| **Name**                       | **Description**                                                                                                                                             | **Default**          | **Control**                                        |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- |
| **options**                    | \{ id: number; label: string; subTitle?: string; url?: string; \}\[\]                                                                                       | \[\]                 | []                                                 |
| **variant**                    | "isSearchInput" `or` "isTextSearch" `or` "isRecentSearch"  `or` "isCardBased" `or` "isCardWithTitleBased" `or` "isShortcutKeyBased" `or` "isShortComponent" | "isSearchInput"      | "isSearchInput"                                    |
| **paperRootStyle**             | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | paperRootStyle : \{\}                              |
| **noOptionsText**              | string                                                                                                                                                      | "no option"          | No options                                         |
| **inputRootStyle**             | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | inputRootStyle : \{\}                              |
| **placeHolderText**            | string                                                                                                                                                      | "Search"             | Search\.\.                                         |
| **placeHolderColor**           | string                                                                                                                                                      | "\#929292"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **placeHolderSize**            | number                                                                                                                                                      | 12                   |
| **inputFontSize**              | number                                                                                                                                                      | 12                   |
| **inputFontColor**             | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **inputBackgroundColor**       | string                                                                                                                                                      | ""                   | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **inputBorderDefaultColor**    | string                                                                                                                                                      | "\#E9E9E9"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **inputBorderHoverColor**      | string                                                                                                                                                      | "\#b4aef4"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **inputBorderFocusColor**      | string                                                                                                                                                      | "\#665CD7"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **startAdornmentIcon**         | ReactNode                                                                                                                                                   | &lt;SearchIcon /&gt; | ""                                                 |
| **endAdornmentIcon**           | ReactNode                                                                                                                                                   | &lt;Close /&gt;      | ""                                                 |
| **paperBackgroundColor**       | string                                                                                                                                                      | ""                   | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **paperBorderColor**           | string                                                                                                                                                      | "\#665CD7"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **paperMinHeight**             | number                                                                                                                                                      | \-                   | Set number                                         |
| **paperMaxHeight**             | number                                                                                                                                                      | \-                   | Set number                                         |
| **listItemSubTextStyles**      | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | listItemSubTextStyles : \{\}                       |
| **listItemSubTextColor**       | string                                                                                                                                                      | "\#E9E9E9"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **listItemSubTextSize**        | number                                                                                                                                                      | 12                   |
| **listItemLabelStyles**        | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | listItemLabelStyles : \{\}                         |
| **listItemLabelColor**         | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **listItemLabelSize**          | number                                                                                                                                                      | 12                   |
| **listTextHoverColor**         | string                                                                                                                                                      | "\#665CD7"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **listTextHoverBgColor**       | string                                                                                                                                                      | "\#fdfafa"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **keyDownListBgcolor**         | string                                                                                                                                                      | ""                   | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **keyDownListTextColor**       | string                                                                                                                                                      | ""                   | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **cardImgStyle**               | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | cardImgStyle : \{\}                                |
| **cardImgWidth**               | number                                                                                                                                                      | 30                   |
| **cardImgHeight**              | number                                                                                                                                                      | 30                   |
| **imgBorderRadius**            | number                                                                                                                                                      | 4                    |
| **recentLabel**                | string                                                                                                                                                      | ""                   | Recent Search                                      |
| **recentLabelTextColor**       | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **recentLabelFontSize**        | number                                                                                                                                                      | 12                   |
| **recentLabelStyle**           | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | recentLabelStyle : \{\}                            |
| **recentSearchItemStyles**     | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | recentSearchItemStyles : \{\}                      |
| **recentSearchItemTextColor**  | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **recentSearchItemBgcolor**    | string                                                                                                                                                      | "\#E9E9E9"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **recentSearchItemSize**       | number                                                                                                                                                      | 10                   |
| **controlsRootStyles**         | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | controlsRootStyles : \{\}                          |
| **controlsTextColor**          | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **controlsBgColor**            | string                                                                                                                                                      | "\#E9E9E9"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **controlsTextSize**           | number                                                                                                                                                      | 12                   |
| **componentColumnDirection**   | "column" `or` "column\-reverse"                                                                                                                             | "column"             | column                                             |
| **recentSearchLabelColor**     | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **recentSearchLabelSize**      | number                                                                                                                                                      | 12                   |
| **recentSearchLabel**          | string                                                                                                                                                      | ""                   | Recent Search                                      |
| **categoryLabel1**             | string                                                                                                                                                      | ""                   | CATEGORY SUGGEST 1                                 |
| **categoryLabel2**             | string                                                                                                                                                      | ""                   | CATEGORY SUGGEST 2                                 |
| **primaryCategoryData**        | \{ id: number; label: string; url?: string; subTitle?: string; \}\[\]                                                                                       | \[\]                 | []                                                 |
| **secondaryCategoryData**      | \{ id: number; label: string; subTitle?: string; url?: string; \}\[\]                                                                                       | \[\]                 | []                                                 |
| **onSelectSearchDataFun**      | ()=>{} void                                                                                                                                                 | \(\) =&gt; false     | \-                                                 |
| **handleInputOnChange**        | ()=>{} void                                                                                                                                                 | \(\) =&gt; false     | \-                                                 |
| **handleOptionChange**         | ()=>{} void                                                                                                                                                 | \(\) =&gt; false     | \-                                                 |
| **className**                  | string                                                                                                                                                      | \-                   | Set string                                         |
| **sx**                         | SxProps&lt;Theme&gt;                                                                                                                                        | \-                   | Set object                                         |
| **isTextSearch**               | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **isRecentSearch**             | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **isCardBased**                | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **isCardWithTitleBased**       | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **isShortcutKeyBased**         | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **isShortComponent**           | boolean                                                                                                                                                     | \-                   | Set boolean                                        |
| **keyBasedOptionStyle**        | SxProps&lt;\{\}&gt;                                                                                                                                         | \{ \}                | Set object                                         |
| **cardTitleImgWidth**          | number                                                                                                                                                      | 40                   | Set number                                         |
| **cardTitleImgHeight**         | number                                                                                                                                                      | 40                   | Set number                                         |
| **TitleImgBorderRadius**       | number                                                                                                                                                      | 4                    | Set number                                         |
| **recentSearchOption**         | any                                                                                                                                                         | \[\]                 | Set object                                         |
| **categoryLabel1Color**        | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **categoryLabel1Size**         | number                                                                                                                                                      | 12                   | Set number                                         |
| **categoryLabel2Color**        | string                                                                                                                                                      | "\#393939dd"         | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **categoryLabel2Size**         | number                                                                                                                                                      | 12                   | Set number                                         |
| **isSearchExpandWithDropdown** | Search with dropdown for search expanded                                                                                                                    | \-                   | Set boolean (true or false)                        |
| **inputWidth**                 | string                                                                                                                                                      | ""                   | width                                              |
| **minExpandWidth**             | string                                                                                                                                                      | ""                   | minExpandWidth for input                           |