UNPKG

@availity/feedback

Version:

Availity feedback with simley faces react component.

80 lines (63 loc) 3.13 kB
# @availity/feedback > Availity feedback with simley faces react component. ## Installation ```bash npm install @availity/feedback --save ``` ### Usage ```javascript import React from 'react'; import Feedback from '@availity/feedback'; // ... <Feedback> {/* ... */} </Feedback> // ... ``` #### Feedback (Default export) A component which does awesome things! ##### Props - **`appName`**: String. Required. The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from. - **`formProps`**: Object. Optional. Props which will be passed to the underlying `FeedbackForm`. See the props for `FeedbackForm` below. - **`children`**: Text. Optional. The text which displays on the button. Default: `"Give Feedback"` - **`color`**: String. Optional. The color of the button. Default: `"light"` - **`outline`**: Boolean. Optional. Indicates if the button should use the "outline" styles or not. Default: `false` - **`prompt`**: String. Optional. Text which prompts/asks the user to provide feedback. Default: `"Tell us what you think about ${appName}."` - **`onFeedbackSent`**: Function. Optional. Callback for when the feedback is submitted. It will be called with the feedback object. - **`modal`**: Boolean. Default `false`. Will open the feedback form in a modal if `true`. ##### Usage ```javascript import React from 'react'; import Feedback from '@availity/feedback'; // ... <Feedback appName="Payer Space" prompt="Please provide some feedback" color="primary" > Provide Feedback </Feedback> // ... ``` #### FeedbackForm This is the underlying form which is exposed in case you need to gather feedback inline. ##### Props - **`name`**: String. Required. The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from. - **`formProps`**: Object. Optional. Props which will be passed to the underlying `FeedbackForm`. See the props for `FeedbackForm` below. - **`faceOptions`**: Array of Objects containing **`icon`** and **`description`**. Optional. Allows you to override the smiley face options which appear. Default: Smiley Face, Meh Face, and Frowny Face. - **`aboutOptions`**: Array of Objects containing **`value`** and **`label`**. Optional. Allows a dropdown displaying the options provided to let the uer indicate what the feedback is about. - **`prompt`**: String. Optional. Text which prompts/asks the user to provide feedback. Default: `"Tell us what you think about ${appName}."` - **`onFeedbackSent`**: Function. Optional. Callback for when the feedback is submitted. It will be called with the feedback object. - **`additionalComments`**: Boolean. Default `false`. If `true` will show and optional comments field below. - **`staticFields`**: Object. Optional. Static (non-user-entered) key/value pairs to be sent in feedback submission ##### Usage ```javascript import React from 'react'; import { FeedbackForm } from '@availity/feedback'; // ... <FeedbackForm name={text('Application Name', 'Payer Space')} prompt={text('Prompt')} /> // ... ```