LeafyGreen UI Kit Message Feedback
npm install @lg-chat/message-feedback``shell`
pnpm add @lg-chat/message-feedback
`shell`
yarn add @lg-chat/message-feedback
`shell`
npm install @lg-chat/message-feedback
`tsx
import { useState } from 'react';
import { FormState, InlineMessageFeedback } from '@lg-chat/message-feedback';
const Example = () => {
const [state, setState] = useState
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 (
onSubmit={handleSubmit}
onClose={handleClose}
state={state}
errorMessage="Failed to submit feedback. Please try again."
/>
);
};
`
| Prop | Type | Description | Default |
| ----------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| label _(required)_ | string | Label text for the feedback textarea | |onSubmit
| | FormEventHandler | 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 | |