emoji-picker-react 4.0.0-rc.33 → 4.0.0-rc.34

package/README.md

@@ -37,6 +37,7 @@ function App() {
 - Skin tone change
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
+- Emoji Component To Render Emojis in your app
 
 # Props
 
@@ -169,6 +170,32 @@ The list of possible variables is quite extensive, but the main ones you may wan
 - `--epr-bg-color`: The background color of the picker. When changing it, you should also change `--epr-category-label-bg-color` as they are usually the same color.
 - `--epr-text-color`: The text color in the picker.
 
+# Rendering Output Emojis in Your App
+
+The picker exports an `Emoji` component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.
+
+## Props
+
+| Name         | Type         | Default            | Description                                                                                 |
+| ------------ | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| `unified`    | string       | ""                 | The unified code of the emoji.                                                              |
+| `size`       | number       | 32                 | The size of the emoji.                                                                      |
+| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
+| `lazyLoad`   | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+
+```js
+import { Emoji, EmojiStyle } from 'emoji-picker-react';
+
+export function MyApp() {
+  return (
+    <p>
+      My Favorite emoji is:
+      <Emoji unified="1f423" size="25" />
+    </p>
+  );
+}
+```
+
 # Troubleshooting
 
 ## Error Boundary

package/dist/components/emoji/ExportedEmoji.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { EmojiStyle } from '../../types/exposedTypes';
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad }: {
+    unified: string;
+    emojiStyle?: EmojiStyle;
+    size?: number;
+    lazyLoad?: boolean;
+}): JSX.Element | null;

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,4 @@
-import { Categories } from "../config/categoryConfig";
+import { Categories } from '../config/categoryConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis } from './DataTypes';
 export declare function emojiNames(emoji: DataEmoji): string[];

package/dist/emoji-picker-react.cjs.development.js

@@ -14989,7 +14989,12 @@ function emojiByUnified(unified) {
     return;
   }
 
-  return allEmojisByUnified[unified];
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+
+  var withoutSkinTone = unifiedWithoutSkinTone(unified);
+  return allEmojisByUnified[withoutSkinTone];
 }
 var allEmojis = /*#__PURE__*/Object.values(emojis).flat();
 var allEmojisByUnified = {};
@@ -17467,10 +17472,31 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ErrorBoundary;
 }(React.Component);
 
+function ExportedEmoji(_ref) {
+  var unified = _ref.unified,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      _ref$emojiStyle = _ref.emojiStyle,
+      emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
+      _ref$lazyLoad = _ref.lazyLoad,
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad;
+
+  if (!unified) {
+    return null;
+  }
+
+  return React.createElement(ViewOnlyEmoji, {
+    unified: unified,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad
+  });
+}
+
 function EmojiPicker$1(props) {
   return React.createElement(ErrorBoundary, null, React.createElement(EmojiPicker, Object.assign({}, props)));
 }
 
-exports.Emoji = ViewOnlyEmoji;
+exports.Emoji = ExportedEmoji;
 exports.default = EmojiPicker$1;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map