Emoji - Resourced emoji

Usage

Import the component in your React app as follows:

  import { ResourcedEmoji } from '@atlaskit/emoji';
  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/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 emojiProvider = new EmojiResource(config);
  const emojiId = { shortName: ':grimacing:', id: '1f603' };

  ReactDOM.render(
    <ResourcedEmoji
      emojiId={emojiId}
      emojiProvider={emojiProvider}
      optimistic
      optimisticImageURL={emojiProvider.getOptimisticImageURL(emojiId)}
    />,
    container,
  );

Resourced Emoji

Optimistic Fetching of Resourced Emoji

Resourced Emoji can take in a optimistic prop that allow the emoji resource to fetch its own emoji meta data and fallback to the emoji provider collection if it fails.

Optimistic Emoji Rendering

First renders a static image url before rendering the hydrated component

Optimistic Resource Emoji Rendering

Fetches a single emoji metadata

Provider Based Emoji Rendering

Requires the complete emoji collection provider to have downloaded before it renders

Fallback Based Emoji Rendering

Allows a custom fallback element if the emoji cannot be found

EmojiLoader config

{ "recordConfig": { "url": "https://www.example.org/" }, "providers": [ { "url": "https://www.example.org/emoji/standard" }, { "url": "https://www.example.org/emoji/site-id/site" } ], "singleEmojiApi": {}, "optimisticImageApi": {}, "allowUpload": true }

Props

`emojiProvider` `Promise<object>` `required`

EmojiResource instance that handles fetching of emoji data.

PromisegetMediaEmojiDescriptionURLWithInlineToken function required emoji => Promisename string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
fetchByEmojiId function required function emojiId, 
optimistic
 => One of One of skinVariations arrayType Arrayname string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
, 
PromiseOne of skinVariations arrayType Arrayname string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
findByShortName function required shortName => One of One of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
, 
PromiseOne of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
findByEmojiId function required emojiId => One of One of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
, 
PromiseOne of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
findById function required id => One of One of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
, 
PromiseOne of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
findInCategory function required categoryId => PromiseArrayname string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
getAsciiMap function required  => PromiseMapstring, name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
getFrequentlyUsed function required options => PromiseArrayname string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
recordSelection function emoji => Promiseany
deleteSiteEmoji function required emoji => Promiseboolean
loadMediaEmoji function required function emoji, 
useAlt
 => One of One of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
, 
PromiseOne of name string 
order number 
type string required 
category string required 
ascii arrayType Arraystring
createdDate string 
creatorUserId string 
representation  required One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
altRepresentation  One of sprite  required url string required 
row number required 
column number required 
height number required 
width number required 
x number required 
y number required 
xIndex number required 
yIndex number required 
height number required 
width number required 
, 
imagePath string required 
height number required 
width number required 
, 
mediaPath string required 
height number required 
width number required 
, 
undefined
searchable boolean required 
shortName string required 
id string 
fallback string 
, 
undefined
optimisticMediaRendering function required function emoji, 
useAlt
 => boolean
getSelectedTone function required  => One of number, 
undefined
setSelectedTone function required tone => undefined
calculateDynamicCategories function  => PromiseArraystring
getCurrentUser function required  => One of id string required 
, 
undefined
fetchEmojiProvider function required force => PromiseOne of EmojiRepository, 
undefined
getOptimisticImageURL function required emojiId => One of string, 
undefined
onlyFetchOnDemand function () => boolean

`emojiId` `object` `required`

Emoji to display

shortName string required 
id string 
fallback string

`showTooltip` `boolean`

Allows to show the tooltip. Defaults to false.

`fitToHeight` `number`

Scales the emoji proportionally to provided hight. Defaults to undefined.

`optimistic` `boolean`

Optimistic will call the fetch interface first and not wait for the entire emoji collection to be available before rendering. This is useful for views or pages that show a select set of emojis. Defaults to false.

`customFallback` `union`

Custom Fallback allows a custom element or string to be rendered if an emoji fails to be fetched or found. By default it takes the fallback or shortName inside emojiId, but if this prop is set it override the internal fallbacks customFallback<Element | string> else emojiId.fallback else emojiId.shortName. Defaults to undefined.

One of JSX.Element, 
string

`optimisticImageURL` `string`

Will attempt to render a highly condensed version of the emoji with an image url before showing the meta version. All that is required for optimistic images to render is an emojiId, imageUrl and sizing props. Defaults to undefined.

`editorEmoji` `string`

This should only be set when the emoji is being used in the Editor. Currently when set -- this prevents any aria labels being added. This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.

Emoji - Resourced emoji

Usage

Resourced Emoji

Optimistic Fetching of Resourced Emoji

Optimistic Emoji Rendering

Optimistic Resource Emoji Rendering

Provider Based Emoji Rendering

Fallback Based Emoji Rendering

Props

emojiProvider Promise<object> required

emojiId object required

showTooltip boolean

fitToHeight number

optimistic boolean

customFallback union

optimisticImageURL string

editorEmoji string