## About

The user feedback extension is a PatternFly React based component used to collect user feedback. Examples of how to use this extension are documented below. This extensions allows users to submit feedback, report a bug, request support, as well as join a mailing list to stay updated on the latest news and research opportunities.

## Examples

### Basic modal

To collect data, you can link modal items to external sources instead of a built in form. For example, you can link to a custom form, which will be opened in a new tab.


import URL from "./URL.tsx?raw"

<LiveExample src={URL} />

### Advanced modal

User feedback offers additional modal items that support different types of feedback. To allow users to report a bug, use the `onReportABug` property. To allow users to join a mailing list, such as one dedicated to future research participation, use the `onJoinMailingList` property. To allow users to open a support case, use the `onOpenSupportCase` property and link users to your support team.

The following example demonstrates each of these modal items. The "Share feedback", "Report a bug", and "Inform the direction of products" items all point to built-in forms.


import Advanced from "./Advanced.tsx?raw"

<LiveExample src={Advanced} />

### Advanced that autofills an email address

To automatically pass a user's email address into a feedback modal, use the email property. This allows you to pre-populate the modal's email field.


import AdvancedWithEmail from "./AdvancedWithEmail.tsx?raw"

<LiveExample src={AdvancedWithEmail} />

### Modal with asynchronous call support

User feedback supports the ability to make asynchronous calls to send data collected from the modal to a backend service.
The following example demonstrates how to use the `async` function to send data to a backend service.


import Async from "./Async.tsx?raw"

<LiveExample src={Async} />

### Modal with internationalization support

To customize the content displayed in the feedback modal, pass in a custom `i18n` object with values for each property of `<FeedbackModal>`. This allows you to prepare a modal for different languages and requirements.


import i18n from "./i18n.tsx?raw"

<LiveExample src={i18n} />