# HelpHub

## Components Visuals 

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F1UIDORPNHzqocWdM1e38%2Fhelp%20hub%20overview.png?alt=media&#x26;token=64491e70-a26f-4036-9288-331c6a70564c" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1 " %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fg4VRiRdXaTymjqQpc9t4%2FHelp%20hub.png?alt=media&#x26;token=026afddd-5e04-4e4e-9912-868786f77bc5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FVUGDUbbwq9PIlASwZI7k%2FHelp%20hub%20chat%201.png?alt=media&#x26;token=743b18bd-eb99-450e-b5f7-2931505c9a08" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FoGfMoCO6BiIHPZid0KrI%2FHelp%20hub%20help.png?alt=media&#x26;token=2e1f9978-8652-4f93-ac53-1915ff9c1524" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FWGA8mVsrecGqYKl6rRx1%2FHelp%20hub%20update.png?alt=media&#x26;token=f590ff94-c8e5-45bd-9ec4-b142601ca0b5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual5" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F8zer6WtZiCG3OqNoOpSF%2FHelp%20hub%20tasks.png?alt=media&#x26;token=ec1b2399-ea81-4ef4-b569-dabddacaf7d6" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Installation

To install the `Quest react-native-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-native-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 %}

## Usage

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

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

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

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

## Props of HelpHub Component

The HelpHub `styleConfig` component accepts the following props

**Home**

<table><thead><tr><th width="272">Props Name</th><th width="109">Type</th><th width="106">Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td>Optional</td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Home Heading Text style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Home SubHeading Text style.</td></tr><tr><td>sendMessageViewStyle </td><td>ViewStye</td><td></td><td>Send Message VIew Style</td></tr><tr><td>sendMessageTitleStyle </td><td>TextStyle</td><td></td><td>Send Message Title Text Style</td></tr><tr><td>sendMessageDescriptionStyle</td><td>TextStyle</td><td></td><td>Send Message Description Text Style</td></tr><tr><td>communityMainViewStyle </td><td>ViewStyle</td><td></td><td>community Main  View Style </td></tr><tr><td>communityDemoViewStyle </td><td>ViewStyle</td><td></td><td>community Demo View Style </td></tr><tr><td>communityTitleStyle </td><td>TextStyle</td><td></td><td>community Title Text Style </td></tr><tr><td>communityDescriptionStyle</td><td>TextStyle</td><td></td><td>community Description text Style</td></tr><tr><td>searchMainViewStyle </td><td>ViewStyle</td><td></td><td>search Main View Style </td></tr><tr><td>searchViewStyle</td><td>ViewStyle</td><td></td><td>search View Style</td></tr><tr><td>searchListItemTitleStyle</td><td>TextStyle</td><td></td><td>Search List Item Title Text Style</td></tr><tr><td>getupdateMainViewStlye <br></td><td>ViewStyle</td><td></td><td>get update Main View Stlye </td></tr><tr><td>getupdateHeaderTextStyle </td><td>TextStyle</td><td></td><td>get update Header Text Style </td></tr><tr><td>getupdateTitleStyle </td><td>TextStyle</td><td></td><td>get update Title Style </td></tr><tr><td>getupdateTitle2Style</td><td>TextStyle</td><td></td><td>get update Title2 Style</td></tr><tr><td>getupdateDescriptionStyle</td><td>TextStyle</td><td></td><td>get update Description text Style</td></tr><tr><td>getupdateDescription2Style</td><td>TextStyle</td><td></td><td>get update Description2 text Style</td></tr><tr><td>getupdateButtonStyle </td><td>ViewStyle</td><td></td><td>get update Button Style </td></tr><tr><td>getupdateButtonTextStyle</td><td>TextStyle</td><td></td><td>get update Button Text Style</td></tr><tr><td>complateProfileView </td><td>ViewStyle</td><td></td><td>complate Profile View Style</td></tr><tr><td>complateProfileHeaderTextStyle</td><td>TextStyle</td><td></td><td>complate Profile Header Text Style</td></tr><tr><td>complateProfileDescriptionStyle</td><td>TextStyle</td><td></td><td>complate Profile Description Text Style</td></tr><tr><td>satisfiedMainViewStyle </td><td>ViewStyle</td><td></td><td>satisfied Main View Style </td></tr><tr><td>satisfiedTitleStyle </td><td>TextStyle</td><td></td><td>satisfied Title Style </td></tr><tr><td>satisfiedDescriptionStyle</td><td>TextStyle</td><td></td><td>satisfied Description Style</td></tr><tr><td>satisfiedFooterTextStyle</td><td>TextStyle</td><td></td><td>satisfied Footer Text Style</td></tr></tbody></table>

**Chat**

<table><thead><tr><th width="249">Props Name</th><th width="112">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Msin View Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style </td></tr><tr><td>chatButton </td><td>TextStyle</td><td></td><td>chat Button  View Style</td></tr><tr><td>chatButtonText</td><td>TextStyle</td><td></td><td>chat Button Text Style</td></tr><tr><td>privetChatHeaderTextStyle</td><td>TextStyle</td><td></td><td>privet Chat Header Text Style</td></tr><tr><td>chatTitleText </td><td>TextStyle</td><td></td><td>chat Title Text Style</td></tr><tr><td>chatTitleDescription</td><td>TextStyle</td><td></td><td>chat Title Description text Style</td></tr><tr><td>message</td><td>ViewStyle</td><td></td><td>message View Style</td></tr><tr><td>chatInputViewStyle</td><td>ViewStyle</td><td></td><td>chat Input View Style</td></tr></tbody></table>

### Help

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>FaqTextStyle</td><td>TextStyle</td><td></td><td>Faq Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>

### Update

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>timeText</td><td>TextStyle</td><td></td><td>time Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>

### Tasks

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>tasksStepTextStyle</td><td>TextStyle</td><td></td><td>tasks Step Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>

### Example Usage

```typescript
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {HelpHub,QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
         entityId="Your-Entity-id"
         >
        <HelpHub
        questId=""
        token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJ1LWM5YmM3ZWEyLTE1NTgtNDg4OC05NmIxLWY3YWZkZmU2OTZkMSIsImlhdCI6MTcxMjA1OTk4MywiZXhwIjoxNzEyNjY0NzgzfQ.iz6CMwk8NSb07--IZC6_RNAJS5LVRnhA-6Z-Xm9EmEY"
        userId="u-c9bc7ea2-1558-4888-96b1-f7afdfe696d1"
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});
```

## Demo