CreditsPopup Component
The CreditsPopup component is a React component that provides a customizable popup for displaying information, alerts, or notifications to users.
CreditsPopup Component Features
Customizable Content: The component allows you to customize the heading text, description text, and button text to convey specific information to users.
Closable Popup: You can enable or disable the close button to allow users to close the popup when needed.
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. Iftrue
, the popup is displayed. Iffalse
, it is hidden.onClose
(function, required): A callback function that is called when the user closes the popup. It is typically used to change theisOpen
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. Iftrue
, the close button is shown. Iffalse
, it is hidden. Defaults tofalse
.continueButton
(boolean, optional): Determines whether the continue button is displayed. Iftrue
, the button is shown. Iffalse
, it is hidden. Defaults tofalse
.buttonText
(string, optional): The text to be displayed on the continue button. It is only visible ifcontinueButton
istrue
.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:
Include the component in your JSX, passing the required props:
Customize the content, visibility, and behavior of the popup by adjusting the props accordingly.
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:
Last updated