# CreditsPopup Component

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FY48YWPwtfHIxEuAdXblU%2FSuccess%20Celebrations.png?alt=media&#x26;token=af7b97b3-9aa1-4062-8773-6394b20d65c1" 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;
```