Top Level Components

Activity Properties Basic usage Activity with attached image and hashtag Activity with enriched URL Activity with custom header and content components Flat feed Notification Notification dropdown Notification feed Single post Status update form

UI Components

Layout Components

Streami18n

Composition Components

Readme

Activity

Properties

activity

Record<string, unknown> & { attachments?: Attachments | undefined; text?: string | undefined; } & BaseActivity & Pick<Activity<Record<string, unknown>>, "time" | "foreign_id" | "id" | "analytics" | "extra_context" | "origin" | "score"> & { ...; }

required

Card

string | number | boolean | ReactElement<PropsWithElementAttributes<{ alt?: string | undefined; handleClose?: ((e: SyntheticEvent<Element, Event>) => void) | undefined; image?: string | null | undefined; nolink?: boolean | undefined; } & Pick<...>, HTMLAnchorElement>, string | ... 1 more ... | (new (props: any) => C...

Card (Component)

Content

string | number | boolean | ReactElement<PropsWithElementAttributes<{ activity: EnrichedActivity<UT, AT, CT, RT, CRT>; Card?: string | number | boolean | ReactElement<PropsWithElementAttributes<{ alt?: string | undefined; handleClose?: ((e: SyntheticEvent<Element, Event>) => void) | undefined; image?: string | ... 1...

ActivityContent (Component)

feedGroup

string | undefined

Footer

Header

string | number | boolean | ReactElement<Pick<PropsWithElementAttributes<{ activity: EnrichedActivity<UT, AT, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>>; Card?: string | number | boolean | ReactElement<PropsWithElementAttributes<{ ...; } & Pick<...>, HTMLAnchorElement>, string | ... 1...

ActivityHeader (Component)

HeaderRight

icon

string | undefined

onClickHashtag

WordClickHandler | undefined

onClickMention

WordClickHandler | undefined

onClickUser

((user: UserOrDefaultReturnType<UT>) => void) | undefined

Repost

Repost (Component)

userId

string | undefined

Basic usage

Nora Ferguson

a few seconds ago

I just missed my train 😤

<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} />
  )}
/>

<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} />
  )}
/>

Activity with attached image and hashtag

Nora Ferguson

a few seconds ago

Just came back from this hike! #Hiking #Madeira

<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}`)}
/>

<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}`)}
/>

Activity with enriched URL

Nora Ferguson

a few seconds ago

Oh snap!

'Queen' rapper rescheduling dates to 2019 after deciding to “reevaluate elements of production on the 'NickiHndrxx Tour'

rollingstone.com

Why choose one when you can wear both? These energizing pairings stand out from the crowd

<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(),
  }}
/>

<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(),
  }}
/>

Activity with custom header and content components

Nora Ferguson

You can customize your activity however you like!

<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>}
/>

<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>}
/>