signal-desktop/ts/components/conversation/ReactionViewer.md

Reaction Viewer

Few Reactions

<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
  <ReactionViewer
    i18n={util.i18n}
    reactions={[
      {
        emoji: '❤️',
        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
      },
      {
        emoji: '👍',
        from: {
          id: '+14155552671',
          phoneNumber: '+14155552671',
          profileName: 'Joel Ferrari',
        },
      },
    ]}
  />
</util.ConversationContext>

Picked Reaction

<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
  <ReactionViewer
    i18n={util.i18n}
    pickedReaction="👍"
    reactions={[
      {
        emoji: '❤️',
        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
      },
      {
        emoji: '👍',
        from: {
          id: '+14155552671',
          phoneNumber: '+14155552671',
          profileName: 'Joel Ferrari',
        },
      },
    ]}
  />
</util.ConversationContext>

Many Reactions

<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
  <ReactionViewer
    i18n={util.i18n}
    reactions={[
      {
        emoji: '❤️',
        timestamp: 1,
        from: {
          id: '+14155552671',
          phoneNumber: '+14155552671',
          profileName: 'Ameila Briggs',
        },
      },
      {
        emoji: '❤️',
        timestamp: 2,
        from: { id: '+14155552672', name: 'Adam Burrel' },
      },
      {
        emoji: '❤️',
        timestamp: 3,
        from: { id: '+14155552673', name: 'Rick Owens' },
      },
      {
        emoji: '❤️',
        timestamp: 4,
        from: { id: '+14155552674', name: 'Bojack Horseman' },
      },
      {
        emoji: '❤️',
        timestamp: 4,
        from: { id: '+14155552675', name: 'Cayce Pollard' },
      },
      {
        emoji: '❤️',
        timestamp: 5,
        from: { id: '+14155552676', name: 'Foo McBarrington' },
      },
      {
        emoji: '❤️',
        timestamp: 6,
        from: { id: '+14155552677', name: 'Ameila Briggs' },
      },
      {
        emoji: '❤️',
        timestamp: 7,
        from: {
          id: '+14155552678',
          phoneNumber: '+14155552678',
          profileName: 'Adam Burrel',
        },
      },
      {
        emoji: '❤️',
        timestamp: 8,
        from: { id: '+14155552679', name: 'Rick Owens', isMe: true },
      },
      {
        emoji: '👍',
        timestamp: 9,
        from: { id: '+14155552671', name: 'Adam Burrel' },
      },
      {
        emoji: '👎',
        timestamp: 10,
        from: { id: '+14155552671', name: 'Rick Owens' },
      },
      {
        emoji: '😂',
        timestamp: 11,
        from: { id: '+14155552671', name: 'Bojack Horseman' },
      },
      {
        emoji: '😮',
        timestamp: 12,
        from: { id: '+14155552671', name: 'Cayce Pollard' },
      },
      {
        emoji: '😢',
        timestamp: 13,
        from: { id: '+14155552671', name: 'Foo McBarrington' },
      },
      {
        emoji: '😡',
        timestamp: 14,
        from: { id: '+14155552671', name: 'Foo McBarrington' },
      },
    ]}
  />
</util.ConversationContext>

Name Overflow

<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
  <ReactionViewer
    i18n={util.i18n}
    reactions={[
      {
        emoji: '❤️',
        from: { id: '+14155552671', name: 'Foo McBarringtonMcBazzingtonMcKay' },
      },
      {
        emoji: '❤️',
        from: {
          id: '+14155552671',
          name: 'Foo McBarringtonMcBazzingtonMcKay',
          isMe: true,
        },
      },
      {
        emoji: '❤️',
        from: {
          id: '+14155552671',
          phoneNumber: '+14155552671',
          profileName: 'Foo McBarringtonMcBazzingtonMcKay',
          isMe: true,
        },
      },
    ]}
  />
</util.ConversationContext>