<commit_before># Media

A Media component provides the UI to render media-based content within a [Message](./Message.md).


## Example

```jsx
<Message from avatar={<Avatar name='<NAME>' />}>
  <Message.Chat read timestamp='9:41am'>
    Hey Buddy!
  </Message.Chat>
  <Message.Media imageUrl='https://img.buzzfeed.com/buzzfeed-static/static/2014-12/5/11/enhanced/webdr06/longform-original-7538-1417798667-22.jpg?downsize=715:*&output-format=auto&output-quality=auto' caption='image.jpg' timestamp='9:41am' read />
</Message>
```


## Props

| Prop | Type | Description |
| --- | --- | --- |
| caption | string | Description of the media. |
| className | string | Custom class names to be added to the component. |
| from | node/boolean | Provides author information and applies "From" styles. |
| imageUrl | string | URL of the media image. |
| ltr | boolean | Applies left-to-right text styles. |
| rtl | boolean | Applies right-to-left text styles. |
| read | boolean | Determines if the Message is read. |
| ltr | boolean | Applies left-to-right text styles. |
| timestamp | string | Timestamp for the Message. |
| to | node/boolean | Provides author information and applies "To" styles. |
<commit_msg>Adjust media documentation [skip ci]<commit_after># Media

A Media component provides the UI to render media-based content within a [Message](./Message.md).


## Example

```jsx
<Message from avatar={<Avatar name='<NAME>' />}>
  <Message.Chat read timestamp='9:41am'>
    Hey Buddy!
  </Message.Chat>
  <Message.Media imageUrl='...' caption='image.jpg' timestamp='9:41am' read />
</Message>
```


## Props

| Prop | Type | Description |
| --- | --- | --- |
| caption | string | Description of the media. |
| className | string | Custom class names to be added to the component. |
| from | node/boolean | Provides author information and applies "From" styles. |
| imageUrl | string | URL of the media image. |
| ltr | boolean | Applies left-to-right text styles. |
| rtl | boolean | Applies right-to-left text styles. |
| read | boolean | Determines if the Message is read. |
| ltr | boolean | Applies left-to-right text styles. |
| timestamp | string | Timestamp for the Message. |
| to | node/boolean | Provides author information and applies "To" styles. |

{'fraction_non_alphanumeric': 0.1435512367491166, 'fraction_numerical': 0.018551236749116608, 'mean_word_length': 3.748427672955975, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '393299', 'n_tokens_mistral': 720, 'n_tokens_neox': 682, 'n_words': 226}