Reactions

Examples

Typescript ❤️

Reactions component

Install

yarn add @atlaskit/reactions

npm

Source

Bundle

Latest

26.5.1

Patch Changes

Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

The main purpose of the Reactions component is to provide users the ability to react to pieces of content. It includes support for adding/view/remove a reaction from a specified emoji provider object.

The key components to use are:

The key types to use are:

The guide to supporting GraphQL can be found here:

Graphql Support

Usage

For each of these components, first import the following in your React app as follows:

  import { ReactionStore, ConnectedReactionsView, State, MemoryReactionsStore, ReactionServiceClient } from '@atlaskit/reactions';
  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';

  // Config object for the emoji resource
  const config: EmojiResourceConfig = {
    singleEmojiApi: {
      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId',
      securityProvider: () => ({
        headers: {
          'User-Context': '{{token}}',
          Authorization: 'Bearer {{token}}',
        },
      })
    },
    optimisticImageApi: {
      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId/path',
      securityProvider: () => ({
        headers: {
          'User-Context': '{{token}}',
          Authorization: 'Bearer {{token}}',
        },
      })
    },
    providers: [
      {
        url: 'https://emoji-example/emoji/standard',
      },
      {
        url: 'https://emoji-example/emoji/site-id/site',
        securityProvider: () => ({
          headers: {
            Authorization: 'Bearer {{token}}',
          },
        }),
      },
    ]
  };

  const apiConfig = {
    baseUrl: 'http://www.example.org',
    // optional, generate token from asap, check \`pf-emoji-service\` for more info
    authHeader: 'Bearer token',
  };

  // Create a client object fetching the reactions data from the specified url
  const client = new ReactionServiceClient(apiConfig.baseUrl, apiConfig.authHeader);

  // Define the initial state object
  const intialState: State = {
    reactions: {},
    flash: {}
  };

  // Define the store object that will handle all the reactions data (get/set/remove) and the API calls to the server
  const store = new MemoryReactionsStore(client, intialState, {
    subproduct: 'atlaskit',
  });

  // Define an emoji resource object instance that will be passed as prop to the ConnectedReactionsView component
  const emojiResource = new EmojiResource(config); //See warning below

  /**
   * fetch from all the providers in the config object and cache the results (see EmojiResource for more info).
   * Note: this is a one time fetch, so if you want to fetch from the same providers again, you need to create a new EmojiResource instance. Furhermore, you'll need to handle for a failed fetch and retry requests if your app logic requires this.
   */
  emojiResource.fetchEmojiProvider();

  // Retrieve your ari and containerAri values from the server
  const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
  const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';


  // Render the component in your React app
  ReactDOM.render(
    <ConnectedReactionsView
      store={store}
      containerAri={containerAri}
      ari={demoAri}
      emojiProvider={Promise.resolve(emojiResource)}
    />
    container,
  };

There should be only one instance of EmojiResource in your application

Make sure EmojiResource is initialised only once to avoid performance issues using useMemo.

EmojiResource object implements the EmojiProvider interface.

See here for information on EmojiProvider.

Note:

Don't forget to add polyfills for fetch, ES6 & ES7 to your product build if you want to target older browsers. We recommend the use of babel-preset-env & babel-polyfill

Example:

Picker and Reactions

"ConnectedReactionsView" with a built in memory store and different emoji populated and several are selected.

"ConnectedReactionsView" with miniMode for add reaction button

"allowAllEmojis" prop - Show the "more emoji" selector icon for choosing emoji icons beyond the default list of emojis (defaults to DEFAULT_REACTION_EMOJI_IDS)

"ConnectedReactionsView" with allowAllEmojis prop set to true (Select custom emojis from the picker instead of just a pre-defined list)

"ConnectedReactionsView" with allowAllEmojis flag set is not provided or false

"pickerQuickReactionEmojiIds" prop - emojis shown for user to select from the picker popup when the reaction add button is clicked

"ConnectedReactionsView" with non-empty pickerQuickReactionEmojiIds array populated a single item

"ConnectedReactionsView" with empty pickerQuickReactionEmojiIds array (shows the full picker selector)

"quickReactionEmojis" prop - emojis that will be shown in the the primary view even if the reaction count is zero and no emojis were created on the post/reply yet

"ConnectedReactionsView" with quickReactionEmojis array without any emoji (undefined or empty array) added to the container|ari item

"ConnectedReactionsView" with quickReactionEmojis array with some quick emoji icons selections to choose

"ConnectedReactionsView" with large emoji picker, emojiPickerSize could be small, medium or large (default to medium).

"allowUserDialog" prop - enables a link within the reaction tooltip to show a full user list associated with all reactions

Connected reactions with reactions dialog enabled

"allowUserDialog" prop with callbacks - enables a link within the reaction tooltip to show a full user list associated with all reactions with event callbacks shown

Connected reactions with reactions dialog enabled and callbacks shown as alert dialogs

"ConnectedReactionsView" with a built in memory store and particle emojis enabled.

Reactions Props

`loadReaction` `function` `required`

event handler to fetching the reactions

() => undefined

`onSelection` `function` `required`

Event callback when an emoji button is selected

emojiId => undefined

`reactions` `arrayType`

Optional list of reactions to render (defaults to empty list)

Arrayari string required 
containerAri string required 
emojiId string required 
count number required 
reacted boolean required 
users arrayType Arrayid string required 
displayName string required 
profilePicture  path string required 
accountId string 
optimisticallyUpdated boolean

`status` `union` `required`

Condition for the reaction list status while being fetched

One of ReactionStatus.ready, 
ReactionStatus.loading, 
ReactionStatus.error, 
ReactionStatus.notLoaded, 
ReactionStatus.disabled

`onReactionClick` `function` `required`

event handler when the emoji button is clicked

function id, 
event
 => undefined

`flash` `Record<string, boolean>`

Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)

Recordstring, boolean

`particleEffectByEmoji` `Record<string, boolean>`

Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect). Generally used for newly added reactions.

Recordstring, boolean

`getReactionDetails` `function`

Optional event to get reaction details for an emoji @param emojiId current reaction emoji id

emojiId => undefined

`errorMessage` `string`

Optional error message to show when unable to display the reaction emoji

`quickReactionEmojis` `object`

quickReactionEmojiIds are emojis that will be shown in the the primary view even if the reaction count is zero

ari string required 
containerAri string required 
emojiIds arrayType required Arraystring

`onDialogOpenCallback` `function`

Optional callback function called when opening reactions dialog

function emojiId, 
source
 => undefined

`onDialogCloseCallback` `import`

Optional callback function called when closing reactions dialog

@atlaskit/modal-dialog.OnCloseHandler

`onDialogSelectReactionCallback` `function`

Optional callback function called when selecting a reaction in reactions dialog

emojiId => undefined

`onDialogPageChangeCallback` `function`

Optional callback function called when navigating between pages in the reactions dialog

function emojiId, 
curentPage, 
maxPages
 => undefined

`summaryViewEnabled` `boolean`

Enables a summary view for displaying reactions. If enabled and the number of reactions meets or exceeds the summaryViewThreshold, reactions will be shown in a more aggregated format.

`summaryViewThreshold` `number`

The minimum number of reactions required to switch to the summary view when summaryViewEnabled is true. Defaults to 3 if not specified.

`summaryViewPlacement` `import`

Optional prop to change the placement of the summary popup reaction list

@atlaskit/popper.Placement

`showOpaqueBackground` `boolean`

Optional prop for using an opaque button background instead of a transparent background

`subtleReactionsSummaryAndPicker` `boolean`

Optional prop for applying subtle styling to reaction summary and picker

`showAddReactionText` `boolean`

Optional prop for displaying text to add a reaction

`hideDefaultReactions` `boolean`

Optional prop for hiding default reactions displayed when there are no existing reactions

`allowUserDialog` `boolean`

Optional prop from checking a feature gate for rendering Reactions Dialog

`ProfileCardWrapper` `React.ComponentType<object>`

Optional prop for rendering a profile card wrapper in the Reactions Dialog

React.ComponentTypeuserId union One of string, 
null
position  One of "bottom-start", 
"bottom", 
"bottom-end", 
"left-start", 
"left", 
"left-end", 
"top-end", 
"top", 
"top-start", 
"right-end", 
"right", 
"right-start"
isAnonymous boolean 
canViewProfile boolean 
children  required react.ReactNode
fullName string 
disabledAriaAttributes boolean 
onVisibilityChange  isVisible => undefined
offset tuple [number, number]
ariaLabel string

`onlyRenderPicker` `boolean`

Optional prop to hide the user reactions and only render the picker

`showRoundTrigger` `boolean`

Optional prop for controlling if the picker hover border will be rounded

`isViewOnly` `boolean`

Optional prop for controlling if the reactions component is view only, disabling adding reactions

`reactionPickerAdditionalStyle` `import`

Option prop for controlling the reaction picker selection style

@atlaskit/primitives.XCSS

`noWrap` `boolean`

Optional prop for disabling the wrap behavior on the reactions container

`noRelativeContainer` `boolean`

Optional prop for using your own container for relative positioning for emoji picker popup

`showMoreEmojiTriggerUI` `boolean`

Optional prop for controlling if Trigger displays the ... show more emoji UI

`showSubtleDefaultReactions` `boolean`

Optional prop for controlling if default reactions are subtle

Reaction Props

`reaction` `object` `required`

Data for the reaction

ari string required 
containerAri string required 
emojiId string required 
count number required 
reacted boolean required 
users arrayType Arrayid string required 
displayName string required 
profilePicture  path string required 
accountId string 
optimisticallyUpdated boolean

`emojiProvider` `Promise<import>` `required`

Provider for loading emojis

Promise@atlaskit/emoji.EmojiProvider

`onClick` `function` `required`

event handler when the emoji button is clicked

function id, 
event
 => undefined

`onMouseEnter` `function`

Optional event when the mouse cursor hovers over the reaction

function emojiId, 
event
 => undefined

`onFocused` `function`

Optional event when focused the reaction

function emojiId, 
event
 => undefined

`flash` `boolean`

Show custom animation or render as standard without animation (defaults to false)

`showParticleEffect` `boolean`

Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)

`showOpaqueBackground` `boolean`

Optional prop for using an opaque button background instead of a transparent background

`allowUserDialog` `boolean`

Optional prop for enabling the Reactions Dialog

`handleOpenReactionsDialog` `function`

Optional function when the user wants to open the Reactions Dialog

options => undefined

`isViewOnly` `boolean`

Optional prop for controlling if the reactions component is view only, disabling adding reactions

`showSubtleStyle` `boolean`

Optional prop for controlling if the reaction displayed is a default one and should not have a border

Reactions

26.5.1

Patch Changes

Note: This component is designed for internal Atlassian development.

Usage

There should be only one instance of EmojiResource in your application

Note:

Example:

Picker and Reactions

Reactions Props

loadReaction function required

onSelection function required

reactions arrayType

status union required

onReactionClick function required

flash Record<string, boolean>

particleEffectByEmoji Record<string, boolean>

getReactionDetails function

errorMessage string

quickReactionEmojis object

onDialogOpenCallback function

onDialogCloseCallback import

onDialogSelectReactionCallback function

onDialogPageChangeCallback function

summaryViewEnabled boolean

summaryViewThreshold number

summaryViewPlacement import

showOpaqueBackground boolean

subtleReactionsSummaryAndPicker boolean

showAddReactionText boolean

hideDefaultReactions boolean

allowUserDialog boolean

ProfileCardWrapper React.ComponentType<object>

onlyRenderPicker boolean

showRoundTrigger boolean

isViewOnly boolean

reactionPickerAdditionalStyle import

noWrap boolean

noRelativeContainer boolean

showMoreEmojiTriggerUI boolean

showSubtleDefaultReactions boolean

Reaction Props

reaction object required

emojiProvider Promise<import> required

onClick function required

onMouseEnter function

onFocused function

flash boolean

showParticleEffect boolean

showOpaqueBackground boolean

allowUserDialog boolean

handleOpenReactionsDialog function

isViewOnly boolean

showSubtleStyle boolean

`loadReaction` `function` `required`

`onSelection` `function` `required`

`reactions` `arrayType`

`status` `union` `required`

`onReactionClick` `function` `required`

`flash` `Record<string, boolean>`

`particleEffectByEmoji` `Record<string, boolean>`

`getReactionDetails` `function`

`errorMessage` `string`

`quickReactionEmojis` `object`

`onDialogOpenCallback` `function`

`onDialogCloseCallback` `import`

`onDialogSelectReactionCallback` `function`

`onDialogPageChangeCallback` `function`

`summaryViewEnabled` `boolean`

`summaryViewThreshold` `number`

`summaryViewPlacement` `import`

`showOpaqueBackground` `boolean`

`subtleReactionsSummaryAndPicker` `boolean`

`showAddReactionText` `boolean`

`hideDefaultReactions` `boolean`

`allowUserDialog` `boolean`

`ProfileCardWrapper` `React.ComponentType<object>`

`onlyRenderPicker` `boolean`

`showRoundTrigger` `boolean`

`isViewOnly` `boolean`

`reactionPickerAdditionalStyle` `import`

`noWrap` `boolean`

`noRelativeContainer` `boolean`

`showMoreEmojiTriggerUI` `boolean`

`showSubtleDefaultReactions` `boolean`

`reaction` `object` `required`

`emojiProvider` `Promise<import>` `required`

`onClick` `function` `required`

`onMouseEnter` `function`

`onFocused` `function`

`flash` `boolean`

`showParticleEffect` `boolean`

`showOpaqueBackground` `boolean`

`allowUserDialog` `boolean`

`handleOpenReactionsDialog` `function`

`isViewOnly` `boolean`

`showSubtleStyle` `boolean`