# CreditsPopup Component

<figure><img src="/files/2YZAo8FXa8kqpjcXYml8" alt="" width="563"><figcaption></figcaption></figure>

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

#### CreditsPopup Component Features

1. **Customizable Content**: The component allows you to customize the heading text, description text, and button text to convey specific information to users.
2. **Closable Popup**: You can enable or disable the close button to allow users to close the popup when needed.
3. **Continue Button**: Optionally, you can include a continue button with a specified action when clicked.

#### CreditsPopup Component Props

The `CreditsPopup` component accepts the following props:

* `isOpen` (boolean, required): Controls the visibility of the popup. If `true`, the popup is displayed. If `false`, it is hidden.
* `onClose` (function, required): A callback function that is called when the user closes the popup. It is typically used to change the `isOpen` state in the parent component.
* `headingText` (React.ReactNode, required): The content to be displayed as the heading text of the popup.
* `descText` (React.ReactNode, required): The content to be displayed as the description text of the popup.
* `isCloseble` (boolean, optional): Determines whether the close button is displayed. If `true`, the close button is shown. If `false`, it is hidden. Defaults to `false`.
* `continueButton` (boolean, optional): Determines whether the continue button is displayed. If `true`, the button is shown. If `false`, it is hidden. Defaults to `false`.
* `buttonText` (string, optional): The text to be displayed on the continue button. It is only visible if `continueButton` is `true`.
* `buttonFunction` (function, optional): A callback function that is called when the continue button is clicked. It allows you to define a specific action to be performed when the button is pressed.

#### CreditsPopup Component Usage

To use the `CreditsPopup` component in your React application:

Import the component:

```
import { CreditsPopup } from '@questLabs/react-sdk';
```

Include the component in your JSX, passing the required props:

```
<CreditsPopup
  isOpen={true}
  onClose={() => handleClosePopup()}
  headingText="Popup Heading"
  descText="This is the popup description."
  isCloseble={true}
  continueButton={true}
  buttonText="Continue"
  buttonFunction={() => handleContinueButtonClick()}
/>
```

1. Customize the content, visibility, and behavior of the popup by adjusting the props accordingly.
2. Use state management to control the `isOpen` prop based on user interactions or application logic.

### Example

Here's a simple example of how to use the `CreditsPopup` component in a React application:

```
import React, { useState } from 'react';
import {CreditsPopup} from '@questLabs/react-sdk';

function App() {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const handleClosePopup = () => {
    setIsPopupOpen(false);
  };

  const handleOpenPopup = () => {
    setIsPopupOpen(true);
  };

  const handleContinueButtonClick = () => {
    // Define the action to be performed when the continue button is clicked
  };

  return (
    <div>
      <h1>Your Application</h1>
      <button onClick={handleOpenPopup}>Show Popup</button>
      <CreditsPopup
        isOpen={isPopupOpen}
        onClose={handleClosePopup}
        headingText="Popup Heading"
        descText="This is the popup description."
        isCloseble={true}
        continueButton={true}
        buttonText="Continue"
        buttonFunction={handleContinueButtonClick}
      />
    </div>
  );
}

export default App;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/creditspopup-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.