| section | extensions | |
|---|---|---|
| id | User feedback | |
| source | react | |
| propComponents |
|
|
| sourceLink | https://github.com/patternfly/react-user-feedback/blob/c0c51c751abf0b798f511806409f25d2a2e87a60/packages/module/patternfly-docs/content/examples/basic.md |
import { FeedbackModal } from "@patternfly/react-user-feedback"; import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';
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.
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.
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.
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.
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.
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.