react-activity-feed/src/components/Activity.mdx

React components to create activity and notification feeds

---
route: /components/activity
menu: Top Level Components
---

import { Playground, Props } from 'docz';
import { Activity } from './Activity';
import { ActivityFooter } from './ActivityFooter';

# Activity

## Properties

<Props of={Activity} />

## Basic usage

<Playground>
  <Activity
    activity={{
      actor: {
        data: {
          name: 'Nora Ferguson',
          profileImage: 'https://randomuser.me/api/portraits/women/72.jpg',
        },
      },
      verb: 'post',
      object: 'I just missed my train 😤',
      time: new Date().toJSON(),
      reaction_counts: {
        repost: 17,
        like: 17,
        comment: 17,
      },
    }}
    userId="batman"
    Footer={({ activity, userId }) => <ActivityFooter userId={userId} activity={activity} />}
  />
</Playground>

## Activity with attached image and hashtag

<Playground>
  <Activity
    activity={{
      actor: {
        data: {
          name: 'Nora Ferguson',
          profileImage: 'https://randomuser.me/api/portraits/women/72.jpg',
        },
      },
      verb: 'post',
      object: 'Just came back from this hike! #Hiking #Madeira',
      image: 'https://handluggageonly.co.uk/wp-content/uploads/2017/08/IMG_0777.jpg',
      time: new Date().toJSON(),
    }}
    onClickHashtag={(word) => window.alert(`You clicked on ${word}`)}
  />
</Playground>

## Activity with enriched URL

<Playground>
  <Activity
    activity={{
      actor: {
        data: {
          name: 'Nora Ferguson',
          profileImage: 'https://randomuser.me/api/portraits/women/72.jpg',
        },
      },
      verb: 'post',
      object: 'Oh snap!',
      attachments: {
        og: {
          description: 'Why choose one when you can wear both? These energizing pairings stand out from the crowd',
          title:
            "'Queen' rapper rescheduling dates to 2019 after deciding to &#8220;reevaluate elements of production on the 'NickiHndrxx Tour'",
          url:
            'https://www.rollingstone.com/music/music-news/nicki-minaj-cancels-north-american-tour-with-future-714315/',
          images: [
            {
              image: 'https://www.rollingstone.com/wp-content/uploads/2018/08/GettyImages-1020376858.jpg',
            },
          ],
        },
      },
      time: new Date().toJSON(),
    }}
  />
</Playground>

## Activity with custom header and content components

<Playground>
  <Activity
    activity={{
      actor: {
        data: {
          name: 'Nora Ferguson',
          profileImage: 'https://randomuser.me/api/portraits/women/72.jpg',
        },
      },
      verb: 'post',
      object: 'You can customize your activity however you like!',
      time: new Date().toJSON(),
    }}
    Header={({ activity }) => <div>{activity.actor.data.name}</div>}
    Content={({ activity }) => <div>{activity.object}</div>}
  />
</Playground>