How to use interweave-emoji - 8 common examples

import { loadEmojiData } from 'emojibase-test-utils';
import { EmojiDataManager } from 'interweave-emoji';
import EmojiDataSourceManager from '../packages/emoji/src/EmojiDataManager';

const data = loadEmojiData();

// Bootstrap our emoji data using the official en dataset
EmojiDataSourceManager.getInstance('en').parseEmojiData(data);
EmojiDataManager.getInstance('en').parseEmojiData(data);

// @ts-ignore
global.regeneratorRuntime = require('regenerator-runtime');

export default function Picker({
  compact,
  locale,
  throwErrors,
  version,
  ...props
}: PickerProps & UseEmojiDataOptions) {
  const [emojis, source, data] = useEmojiData({ compact, locale, throwErrors, version });

  if (emojis.length === 0) {
    return null;
  }

  return ;
}

export default function Emoji(props: Props) {
  const [, emojiSource] = useEmojiData({
    avoidFetch: process.env.NODE_ENV === 'test',
    throwErrors: false,
  });

  return (
    
  );
}

export default function Interweave({
  content,
  filters = [],
  matchers = [],
  onlyMatchers = [],
  withEmoticons,
  ...props
}: Props) {
  const [, emojiSource] = useEmojiData({
    avoidFetch: process.env.NODE_ENV === 'test',
    throwErrors: false,
  });
  const finalFilters = [...globalFilters, ...filters];
  let finalMatchers = [
    ...globalMatchers,
    emailMatcher,
    urlMatcher,
    withEmoticons ? emojiMatcherWithEmoticons : emojiMatcher,
    ...matchers,
  ];

  if (onlyMatchers.length > 0) {
    finalMatchers = finalMatchers.filter(matcher => onlyMatchers.includes(matcher.propName));
  }

enlargeThreshold: 3,
};

export const urlMatcher = new UrlMatcher(
  'url',
  {
    customTLDs: ['tools'],
  },
  UrlFactory,
);

export const emailMatcher = new EmailMatcher('email', {}, EmailFactory);

export const emojiMatcher = new EmojiMatcher('emoji', emojiOptions);

export const emojiMatcherWithEmoticons = new EmojiMatcher('emoji', {
  ...emojiOptions,
  convertEmoticon: true,
});

export type Props = BaseInterweaveProps & {
  /** Render any found links using large prop. */
  large?: boolean;
  /** Only run these matchers (by name). */
  onlyMatchers?: string[];
  /** Render any found links using small prop. */
  small?: boolean;
  /** Convert emoticons to emojis. */
  withEmoticons?: boolean;
};

/**

convertShortcode: true,
  convertUnicode: true,
  enlargeThreshold: 3,
};

export const urlMatcher = new UrlMatcher(
  'url',
  {
    customTLDs: ['tools'],
  },
  UrlFactory,
);

export const emailMatcher = new EmailMatcher('email', {}, EmailFactory);

export const emojiMatcher = new EmojiMatcher('emoji', emojiOptions);

export const emojiMatcherWithEmoticons = new EmojiMatcher('emoji', {
  ...emojiOptions,
  convertEmoticon: true,
});

export type Props = BaseInterweaveProps & {
  /** Render any found links using large prop. */
  large?: boolean;
  /** Only run these matchers (by name). */
  onlyMatchers?: string[];
  /** Render any found links using small prop. */
  small?: boolean;
  /** Convert emoticons to emojis. */
  withEmoticons?: boolean;
};

export class EmojiVirtualList extends React.PureComponent<
  EmojiVirtualListUnifiedProps,
  EmojiVirtualListState
> {
  static propTypes = {
    activeEmoji: EmojiShape,
    activeGroup: PropTypes.string.isRequired,
    columnCount: PropTypes.number.isRequired,
    columnPadding: PropTypes.number,
    commonEmojis: PropTypes.arrayOf(EmojiShape).isRequired,
    commonMode: PropTypes.string.isRequired,
    context: ContextShape.isRequired,
    disableGroups: PropTypes.bool.isRequired,
    emojiPadding: PropTypes.number.isRequired,
    emojiPath: PathShape.isRequired,
    emojis: PropTypes.arrayOf(EmojiShape).isRequired,
    emojiSize: PropTypes.number.isRequired,
    emojiSource: SourceShape.isRequired,
    hideGroupHeaders: PropTypes.bool.isRequired,
    onEnterEmoji: PropTypes.func.isRequired,
    onLeaveEmoji: PropTypes.func.isRequired,
    onScroll: PropTypes.func.isRequired,
    onScrollGroup: PropTypes.func.isRequired,
    onSelectEmoji: PropTypes.func.isRequired,
    rowCount: PropTypes.number.isRequired,
    rowPadding: PropTypes.number,
    scrollToGroup: PropTypes.string.isRequired,
    searching: PropTypes.bool.isRequired,
    skinTonePalette: PropTypes.node,
  };

EmojiVirtualListState
> {
  static propTypes = {
    activeEmoji: EmojiShape,
    activeGroup: PropTypes.string.isRequired,
    columnCount: PropTypes.number.isRequired,
    columnPadding: PropTypes.number,
    commonEmojis: PropTypes.arrayOf(EmojiShape).isRequired,
    commonMode: PropTypes.string.isRequired,
    context: ContextShape.isRequired,
    disableGroups: PropTypes.bool.isRequired,
    emojiPadding: PropTypes.number.isRequired,
    emojiPath: PathShape.isRequired,
    emojis: PropTypes.arrayOf(EmojiShape).isRequired,
    emojiSize: PropTypes.number.isRequired,
    emojiSource: SourceShape.isRequired,
    hideGroupHeaders: PropTypes.bool.isRequired,
    onEnterEmoji: PropTypes.func.isRequired,
    onLeaveEmoji: PropTypes.func.isRequired,
    onScroll: PropTypes.func.isRequired,
    onScrollGroup: PropTypes.func.isRequired,
    onSelectEmoji: PropTypes.func.isRequired,
    rowCount: PropTypes.number.isRequired,
    rowPadding: PropTypes.number,
    scrollToGroup: PropTypes.string.isRequired,
    searching: PropTypes.bool.isRequired,
    skinTonePalette: PropTypes.node,
  };

  static defaultProps = {
    activeEmoji: null,
    columnPadding: 0,