> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/search-bar-component.md).

# Search Bar Component

## **Component Visuals**

{% tabs %}
{% tab title="Visual 1" %}

<figure><img src="/files/YVAuVf3P2p6lNJzqsi4I" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/pyDPHgk1DlwvYT1mubqO" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

***

The `Search` component accepts the following props

## Usage

To integrate the `Search` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Search`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the TutorialComponent**: Import the `Search`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, Search } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`,  and `entityId`. and required props for the `Search`component are `userId, questId, token`

{% hint style="info" %}
Replace `"your-api-key"` and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`, `"your-user-id", "your-questId"` with your actual configuration details.
{% endhint %}

## Code & Steps

{% tabs %}
{% tab title="QuestProvider" %}

```jsx
import { QuestProvider, Search } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <Search> </Search>
      </QuestProvider>
  );
}

export default App;
```

{% endtab %}

{% tab title="Tutorial" %}

```jsx
<Search
    userId=""
    questId=""
    token=""
    uniqueUserId="your-unique-user-id"
>
    // childrens
</Search>
```

{% endtab %}

{% tab title="SearchBar" %}

```jsx
<Search.SearchBar />
```

{% endtab %}

{% tab title="SearchFooter" %}

```jsx
<Search.SearchFooter
    text='your-company-name' 
    link='redirect-link'
    style={{ background : 'white' }}
/>
```

{% endtab %}

{% tab title="Preview" %}

```jsx
<QuestProvider
    apiKey="your-apikey"
    entityId="your-entity-Id"
    apiType="PRODUCTION" // STAGING 
>
    <Search
        userId=""
        questId=""
        token=""
        uniqueUserId="your-unique-user-id"
    >
        <Search.SearchBar />
        <Search.SearchResults />
        <Search.SearchDetails />
        <Search.SearchFooter />
    </Search>
</QuestProvider>
```

{% endtab %}
{% endtabs %}

***

## **Example Usage**

Here's an example of how to use the `Search`component within your React application

{% tabs %}
{% tab title="Search" %}

```jsx
import { QuestProvider, Search } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
    return (
        <div>
            <QuestProvider
                apiKey="your-apikey"
                entityId="your-entity-Id"
                apiType="PRODUCTION" // STAGING 
            >
                <Search
                    userId=""
                    questId=""
                    token=""
                    uniqueUserId="your-unique-user-id"
                >
                    <Search.SearchBar />
                    <Search.SearchResults />
                    <Search.SearchDetails />
                    <Search.SearchFooter />
                </Search>
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}

{% tab title="SearchWrapper" %}

```jsx
import { QuestProvider, SearchWrapper } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
    return (
        <div>
            <QuestProvider
                apiKey="your-apikey"
                entityId="your-entity-Id"
                apiType="PRODUCTION" // STAGING 
            >
                <SearchWrapper
                    userId=""
                    questId=""
                    token=""
                    open={true}
                    buttonText=''
                    uniqueUserId=''
                    sections={false}
                    children
                    className=''
                    showFooter
                    defaultResult={ }
                    defulatResultLength={ }
                    footerLink=''
                    footerText=''
                    iconColor=''
                    icons={ }
                    key={ }
                    onResultClick={ }
                    onSearch={ }
                    placeholder=''
                    searchDetails
                    uniqueEmailId=''
                    variation=''
                    wholerScreen
                    width=''
                    styleConfig={{
                        CommandButton: {},
                        Description: {},
                        Footer: {},
                        Form: {},
                        Heading: {},
                        Icon: {},
                        Input: {},
                        Label: {},
                        listHover: {},
                        Topbar: {}
                    }}
                />
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}
{% endtabs %}

#### Props

The Search component accepts the following props:

<table><thead><tr><th width="247">Prop Name</th><th width="113">Type</th><th width="107">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>userId</strong></td><td>string</td><td>required</td><td>User ID for authentication.</td></tr><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>ID of the Quest.</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing Survey or quest data.</td></tr><tr><td><strong>wholerScreen</strong></td><td>boolean</td><td>optional</td><td> If <code>true</code>, renders the search bar in full screen.</td></tr><tr><td><strong>placeholder</strong></td><td>string</td><td>optional</td><td>search bar placeholder text </td></tr><tr><td><strong>open</strong></td><td>boolean </td><td>optional</td><td>If <code>true</code>, the search bar is initially open.<br>when it is set to ON_CTRL_K_KEY it will be open when user press control or command k .</td></tr><tr><td><strong>icons</strong></td><td>array</td><td>optional</td><td>array of icon url's in string </td></tr><tr><td><strong>buttonText</strong></td><td>string</td><td>optional</td><td>set the button text</td></tr><tr><td><strong>searchDetails</strong></td><td>boolean</td><td>optional</td><td>true: show search details<br>false: not show</td></tr><tr><td><strong>width</strong></td><td>string</td><td>string</td><td>give the width of your search component</td></tr><tr><td><strong>iconColor</strong></td><td>string</td><td>string</td><td>give the icon color</td></tr><tr><td><strong>defaultResultLength</strong></td><td>number </td><td>optional</td><td>Limit the number of search results.</td></tr><tr><td><strong>onResultClick</strong></td><td>function</td><td>optional</td><td>Callback which will be called when user clicks on any result.</td></tr><tr><td><strong>onSearch</strong></td><td>function</td><td>optional</td><td>A function to be executed when searching. Receives the user input as a parameter.</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>Unique user identifier.</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td><strong>Icon</strong></td><td>string</td><td>optional</td><td>CSS Properties</td></tr><tr><td><strong>listHover</strong></td><td>objeact</td><td>optional</td><td>an object contain values background,iconBackground,Heading,Description</td></tr><tr><td><strong>styleConfig</strong></td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the search bar process, including body,  headings, descriptions, input, label, footer, icon.</td></tr></tbody></table>

You can customize the UI with type of styleConfig would be

```
styleConfig = {{
    CommandButton: { },
    Description: { },
    Footer: { },
    Form: { },
    Heading: { },
    Icon: { },
    Input: { },
    Label: { },
    listHover: { },
    Topbar: { }
}}
```

#### Component Behavior

* Users can open and close the search bar using the keyboard shortcut (Ctrl + K).
* Navigation through search results is possible using arrow keys (up and down).
* Pressing Enter opens the selected search result in a new tab.

#### Customization

You can customize the appearance of the Search component by providing optional props such as `color`, `backgroundColor`, `inputColor`, and `defaultResult,defaultResult`

***

### **Demo**

{% embed url="<https://drive.google.com/file/d/1CW1NhLqPY5oUsNV5PgXDrvCGVc6t1b3i/view>" %}