Emoji
Fabric emoji React components
yarn add @atlaskit/emoji68.0.2
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 emoji package is to provide multiple components for selecting from a list of provided emojis and rendering them.
It includes support for adding a custom set of emojis from a specified provider and uploading images as emojis to a service.
Usage
Import the component in your React app as follows:
import EmojiPicker from '@atlaskit/emoji/picker';
import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
const config: EmojiResourceConfig = {
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);
ReactDOM.render(
<EmojiPicker
emojiProvider={emojiProvider}
onSelection={emoji => {
/* do something */
}}
/>,
container,
);Emoji provider is required to be configured in order to use components from this package.
Please refer to `Emoji picker` section for more information on how to configure emoji provider.
Other emoji components import examples
import Emoji from '@atlaskit/emoji/element';
import EmojiTypeAhead from '@atlaskit/emoji/typeahead';
import EmojiPicker from '@atlaskit/emoji/picker';
import ResourcedEmoji, { EmojiResource, AbstractResource, EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig, EmojiRepository, EmojiLoader} from '@atlaskit/emoji/resource';
import { toEmojiId, toOptionalEmojiId, denormaliseEmojiServiceResponse, UsageFrequencyTracker } from '@atlaskit/emoji/utils';
import { EmojiUploader } from '@atlaskit/emoji/admin';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
The examples includes a set of stories for running against a live server. See 'Real Emoji Resource'.
You can specify the URLs manually in the textarea on the story (as json configuration suitable for EmojiResource), or specify it when running the examples in the local-config.ts in the root of this component.
There is an example file local-config-example.ts that can be copied.
Simple Emoji
Emoji at 12px.Emoji at 24px.Emoji at 40px.Emoji at 64px.Props
emoji object required
The emoji to render
name string order number type string required category string required ascii arrayType ArraystringcreatedDate 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 , undefinedaltRepresentation 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 , undefinedsearchable boolean required shortName string required id string fallback string selected boolean
Show the emoji as selected
selectOnHover boolean
Automatically show the emoji as selected based on mouse hover. CSS, fast, does not require a re-render, but selected state not externally controlled via props.
onSelected object
Called when an emoji is selected
string function required function emojiId, emoji, event => undefinedonMouseMove object
Called when the mouse moves over the emoji.
string function required function emojiId, emoji, event => undefinedonFocus object
Called when the mouse moves over the emoji.
string function required function emojiId, emoji, event => undefinedonDelete object
Called when an emoji is deleted
string function required function emojiId, emoji, event => undefinedonLoadError { string: (emojiId, emoji, event) => undefined }<HTMLImageElement>
Callback for if an emoji image fails to load.
{ string: (emojiId, emoji, event) => undefined }HTMLImageElementonLoadSuccess function
Callback for if an emoji image succesfully loads.
emoji => undefinedclassName string
Additional css classes, if required.
showTooltip boolean
Show a tooltip on mouse hover.
showDelete boolean
Show a delete button on mouse hover Used only for custom emoji
fitToHeight number
Fits emoji to height in pixels, keeping aspect ratio
shouldBeInteractive boolean
Indicates whether emoji is an interactive element (tab index and role) or just a view
disableLazyLoad boolean
Disables lazy load on images
autoWidth boolean
- Auto Width takes the constraint of height and enables native scaling based on the emojis image.
- This is primarily used when rendering emojis for SSR as the component does not know the width and height
- at the time of the render. It overrides the emoji representations width with 'auto' on the images width attribute
- Used only for image based emojis
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.