> 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/expansion/referral-components.md).

# Referral Components

## Component Visuals

{% tabs %}
{% tab title="Refer Earn" %}

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

{% tab title="Refer Share" %}

<figure><img src="/files/H5P9jfiUBDMrDTRpeCX8" 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 %}

***

## Usage

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

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `ReferEarn`, 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 `ReferEarn`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, ReferEarn } 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 `ReferEarn`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, ReferEarn } 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 
      >
      <ReferEarn> </ReferEarn>
      </QuestProvider>
  );
}

export default App;


```

{% endtab %}

{% tab title="ReferEarn" %}

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

{% endtab %}

{% tab title="Header" %}

```jsx
<ReferEarn.Header
    heading='your-heading' 
    description:""
/>
```

{% endtab %}

{% tab title="Footer" %}

```jsx
<ReferEarn.Footer
    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 
>
    <ReferEarn
        userId=""
        questId=""
        token=""
        uniqueUserId="your-unique-user-id"
    >
        <ReferEarn.Header />
        <ReferEarn.MainContent />
        <ReferEarn.Footer />
    </ReferEarn>
</QuestProvider>
```

{% endtab %}
{% endtabs %}

***

## **Example Usage**

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

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

```jsx
import { QuestProvider, ReferEarn } 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 
            >
                <ReferEarn
                    userId=""
                    questId=""
                    token=""
                    uniqueUserId="your-unique-user-id"
                >
                    <ReferEarn.Header />
                    <ReferEarn.MainContent/>
                    <ReferEarn.Footer />
                </ReferEarn>
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}

{% tab title="ReferEarnWrapper" %}

```jsx
import { QuestProvider, ReferEarnWrapper } 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 
      >
       <ReferEarnWrapper
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
          styleConfig= {{
              Form: {},
              Heading: {},
              Description: {},
              Footer: {},
              TopBar: {},
          }}
          showFooter={false}
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

### Props

The `ReferEarn` component accepts the following props:

<table><thead><tr><th width="253"></th><th width="106"></th><th width="108"></th><th></th></tr></thead><tbody><tr><td>questId</td><td>string</td><td>required</td><td>The unique identifier for the referral quest associated with the user.</td></tr><tr><td>userId</td><td>string</td><td>required</td><td>The user's unique identifier, often used for tracking referrals.</td></tr><tr><td>token</td><td>string</td><td>required</td><td>A user authentication token required for making API requests.</td></tr><tr><td>heading</td><td>string</td><td>optional</td><td>Heading for the referral component.</td></tr><tr><td>headingColor</td><td>string</td><td>optional</td><td>set the heading color</td></tr><tr><td>description</td><td>string</td><td>optional</td><td>Description for the referral component.</td></tr><tr><td>referralLink</td><td>string</td><td>optional</td><td>Referral link.</td></tr><tr><td>shareButtonText</td><td>string</td><td>optional</td><td>Text for the share button.</td></tr><tr><td>secondaryIconColor</td><td>string</td><td>optional</td><td>Color of secondary icons.</td></tr><tr><td>gradientBackground</td><td>boolean</td><td>optional</td><td>Indicates whether to use a gradient background.</td></tr><tr><td>primaryHeading</td><td>string</td><td>optional</td><td>Primary heading for the gradient background.</td></tr><tr><td>primaryDescription</td><td>string</td><td>optional</td><td>Primary description for the gradient background.</td></tr><tr><td>onCopy</td><td>function</td><td>optional</td><td>Callback function triggered on referral code copy.</td></tr><tr><td>showReferralCode</td><td>boolean</td><td>optional</td><td>Indicates whether to show the referral code.</td></tr><tr><td>isOpen</td><td>boolean</td><td>optional</td><td>if true open the component else not</td></tr><tr><td>bgColor</td><td>string</td><td>optional</td><td>set background color </td></tr><tr><td>uniqueUserId</td><td>string</td><td>optional</td><td>a unique user'id for all user</td></tr><tr><td>showPoweredBy</td><td>boolean</td><td>optional</td><td>Indicates whether to show the "Powered by QuestLabs" footer.</td></tr><tr><td>uniqueEmailId</td><td>string</td><td>optional</td><td>a unique email'id for all user</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the refer earn process, including form, topbar, label, headings, descriptions, Primary button  .</td></tr></tbody></table>

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

**You can customize the UI with type of styleConfig would be**

```typescriptreact
styleConfig= {{
    Form: {},
    Heading : {},
    Description : {},
    Footer: {
    FooterStyle: {},
    FooterText: {},
    FooterIcon: {}
    },
    TopBar: {},
}}
```

### Features

The `ReferEarn` component offers the following features:

1. **Referral Code Retrieval**: It fetches a unique referral code for the user, which they can share with others to earn rewards.
2. **Copy to Clipboard**: Users can easily copy their referral code to the clipboard with a single click, simplifying the sharing process.
3. **Social Media Sharing**: The component provides icons for sharing the referral code on popular social media platforms, such as Twitter and Telegram.
4. **Customization**: Users can customize the appearance of the component by specifying the `color` and `bgColor` props to match their application's design.

## Demo

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