@lg-chat/message-rating
v2.0.2
Published
lg-chat Message Rating
Downloads
394
Readme
Message Rating
Installation
Yarn
yarn add @lg-chat/message-rating
NPM
npm install @lg-chat/message-rating
Example
export const Controlled = ({ value: valueProp, ...rest }) => {
const [value, setValue] = useState<MessageRatingProps['value']>(valueProp);
useEffect(() => {
setValue(value);
}, [valueProp]);
const handleRatingChange: ChangeEventHandler<HTMLInputElement> = e => {
setValue(e.target.value as MessageRatingProps['value']);
};
return (
<MessageRating {...rest} value={value} onChange={handleRatingChange} />
);
};
Output HTML
<div class="leafygreen-ui-oxspne">
<p class="leafygreen-ui-110o31d">How was the response?</p>
<div class="leafygreen-ui-44gx6g">
<div class="leafygreen-ui-1njkmr8">
<input
id="like-message-rating-4"
type="radio"
name="message-rating-4"
aria-checked="false"
hidden=""
aria-label="Thumbs up this message"
value="liked"
/><label for="like-message-rating-4" class="leafygreen-ui-chzegx"
><svg
class="leafygreen-ui-1rhtncv"
height="16"
width="16"
role="img"
aria-label="Thumbs Up Icon"
viewBox="0 0 16 16"
>
<path /></svg
></label>
</div>
<div class="leafygreen-ui-1njkmr8">
<input
id="dislike-message-rating-4"
type="radio"
name="message-rating-4"
aria-checked="false"
hidden=""
aria-label="Thumbs down this message"
value="disliked"
/><label for="dislike-message-rating-4" class="leafygreen-ui-chzegx"
><svg
class="leafygreen-ui-1rhtncv"
height="16"
width="16"
role="img"
aria-label="Thumbs Down Icon"
viewBox="0 0 16 16"
>
<path /></svg
></label>
</div>
</div>
</div>
Properties
| Prop | Type | Description | Default |
| ------------- | -------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------- |
| darkMode
| boolean
| Determines if the component is rendered in dark mode | false
|
| description
| string
| Custom description text | 'How was the response?'
|
| onChange
| React.ChangeEventHandler<HTMLInputElement>
| Event handler called when the value of the underlying radio inputs are changed | |
| value
| 'liked', 'disliked'
| Determines the currently selected value of the radio buttons | |
| ...
| HTMLElementProps<'div'>
| Props spread on root element | |