Composition

We suggest composing around <Interweave /> using a custom component. This provides more options for customization, like the choice between Twitter and Instagram hashtags, or PNG or SVG emojis.

import React from 'react';
import { stripHexcode } from 'emojibase';
import BaseInterweave, { InterweaveProps, FilterInterface, MatcherInterface } from 'interweave';
import { IpMatcher, UrlMatcher, EmailMatcher, HashtagMatcher } from 'interweave-autolink';
import { EmojiMatcher, PathConfig } from 'interweave-emoji';
const globalFilters: FilterInterface[] = [new CustomFilter()];
const globalMatchers: MatcherInterface[] = [
new EmailMatcher('email'),
new IpMatcher('ip'),
new UrlMatcher('url'),
new HashtagMatcher('hashtag'),
new EmojiMatcher('emoji', {
convertEmoticon: true,
convertShortcode: true,
convertUnicode: true,
}),
];
function getEmojiPath(hexcode: string, { enlarged }: PathConfig): string {
return `//cdn.jsdelivr.net/emojione/assets/3.1/png/${enlarged ? 64 : 32}/${stripHexcode(
hexcode,
).toLowerCase()}.png`;
}
interface Props extends InterweaveProps {
instagram?: boolean;
twitter?: boolean;
}
export default function Interweave({
filters = [],
matchers = [],
twitter,
instagram,
...props
}: Props) {
let hashtagUrl = '';
if (twitter) {
hashtagUrl = 'https://twitter.com/hashtag/{{hashtag}}';
} else if (instagram) {
hashtagUrl = 'https://instagram.com/explore/tags/{{hashtag}}';
}
return (
<BaseInterweave
filters={[...globalFilters, ...filters]}
matchers={[...globalMatchers, ...matchers]}
hashtagUrl={hashtagUrl}
emojiPath={getEmojiPath}
newWindow
{...props}
/>
);
}