Message Feedback

!npm (scoped)

Installation

$3

``shell
pnpm add @lg-chat/message-feedback
`

$3

`shell
yarn add @lg-chat/message-feedback
`

$3

`shell
npm install @lg-chat/message-feedback
`

Examples

`tsx
import { useState } from 'react';
import { FormState, InlineMessageFeedback } from '@lg-chat/message-feedback';

const Example = () => {
const [state, setState] = useState(FormState.Unset);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setState(FormState.Submitting);

try {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000));
setState(FormState.Submitted);
} catch (error) {
setState(FormState.Error);
}
};

const handleClose = () => {
setState(FormState.Unset);
};

return (
label="What did you think?"
onSubmit={handleSubmit}
onClose={handleClose}
state={state}
errorMessage="Failed to submit feedback. Please try again."
/>
);
};
`

Properties

$3

| Prop | Type | Description | Default |
| ----------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| label _(required)_ | string | Label text for the feedback textarea | |
| onSubmit | FormEventHandler \| (e: FormEvent) => Promise | Event handler called when the form is submitted. Can be async. | |
| onClose | MouseEventHandler | Event handler called when the close button is clicked. Close button will not be rendered when undefined. | |
| state | 'unset' \| 'error' \| 'submitting' \| 'submitted' | Current state of the feedback component | 'unset' |
| submitButtonText | string | Text displayed inside the submit button | 'Submit' |
| submitButtonProps | ButtonProps | Override props for the submit button | |
| textareaProps | TextAreaProps | Props passed directly to the textarea | |
| submittedMessage | ReactNode | Message rendered in submitted state | 'Submitted! Thanks for your feedback.' |
| errorMessage | ReactNode | Error message to display below the feedback form. Only shown when state is 'error'. | 'Oops, please try again.' |
| disabledSend | boolean | Whether the submit button should be disabled | false |
| enableFadeAfterSubmit | boolean | Whether to fade out the submitted message after submission. When true, the submitted message will fade out after 3000ms and be removed from the DOM. | false |
| darkMode | boolean | Determines if the component will render in dark mode | false |
| ... | HTMLElementProps<'div'>` | Props spread on the root element | |