### Basic Matcher Example

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Demonstrates how a string is deconstructed into an array of strings and React elements using a matcher.

```tsx
['Check out my website, ', <Url>github.com/milesj</Url>, '!'];
```

--------------------------------

### Install interweave-ssr with npm

Source: https://github.com/milesj/interweave/blob/master/packages/ssr/README.md

Install the interweave-ssr package as a development dependency using npm.

```bash
npm install interweave-ssr --save-dev
```

--------------------------------

### Install interweave-ssr with Yarn

Source: https://github.com/milesj/interweave/blob/master/packages/ssr/README.md

Install the interweave-ssr package as a development dependency using Yarn.

```bash
yarn add interweave-ssr --dev
```

--------------------------------

### Install JSDOM with NPM

Source: https://github.com/milesj/interweave/blob/master/website/docs/ssr.mdx

Install the jsdom package as a development dependency using NPM.

```bash
npm install jsdom --save-dev
```

--------------------------------

### Install Interweave Autolink

Source: https://github.com/milesj/interweave/blob/master/packages/autolink/README.md

Install the interweave and interweave-autolink packages using either Yarn or npm.

```bash
yarn add interweave interweave-autolink
// Or
npm install interweave interweave-autolink
```

--------------------------------

### Install Interweave and React

Source: https://github.com/milesj/interweave/blob/master/packages/core/README.md

Install Interweave and its peer dependency React using Yarn or npm. Ensure you are using React 16.8+.

```bash
yarn add interweave react
// Or
npm install interweave react
```

--------------------------------

### Basic Autolinking Example

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Demonstrates how to use UrlMatcher and HashtagMatcher to convert URLs and hashtags within content into anchor links.

```tsx
<Interweave
	content="This contains a URL, https://github.com/milesj/interweave, and a #hashtag, that will be converted to an anchor link!"
	matchers={[new UrlMatcher('url'), new HashtagMatcher('hashtag')]}
/>
```

--------------------------------

### Install Interweave with Yarn

Source: https://github.com/milesj/interweave/blob/master/website/docs/index.mdx

Use this command to add Interweave and React to your project when using Yarn as your package manager.

```bash
yarn add interweave react
```

--------------------------------

### Install Interweave with NPM

Source: https://github.com/milesj/interweave/blob/master/website/docs/index.mdx

Use this command to add Interweave and React to your project when using NPM as your package manager.

```bash
npm install interweave react
```

--------------------------------

### Install JSDOM with Yarn

Source: https://github.com/milesj/interweave/blob/master/website/docs/ssr.mdx

Install the jsdom package as a development dependency using Yarn.

```bash
yarn add jsdom --dev
```

--------------------------------

### Demo Grid Layout

Source: https://github.com/milesj/interweave/blob/master/tests/index.html

Establishes a flex container for demo elements, aligning them to the start. Used for layout purposes.

```css
.demo-grid {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
```

--------------------------------

### Setup JSDOM for SSR

Source: https://github.com/milesj/interweave/blob/master/website/docs/ssr.mdx

Create a JSDOM instance and set the global window and document objects before rendering React for SSR. This provides a robust DOM implementation.

```typescript
import JSDOM from 'jsdom';

global.window = new JSDOM('', { url: 'http://localhost' });
global.document = global.window.document;
```

--------------------------------

### Install Interweave Emoji Picker with Yarn

Source: https://github.com/milesj/interweave/blob/master/packages/emoji-picker/README.md

Install the necessary Interweave packages using Yarn. This includes the core Interweave library, emoji extension, emoji picker, and Emojibase.

```bash
yarn add interweave interweave-emoji interweave-emoji-picker emojibase
```

--------------------------------

### Install Interweave Emoji Package

Source: https://github.com/milesj/interweave/blob/master/packages/emoji/README.md

Install the necessary packages for emoji support. This includes interweave, interweave-emoji, and emojibase.

```bash
yarn add interweave interweave-emoji emojibase
// Or
npm install interweave interweave-emoji emojibase
```

--------------------------------

### Install Emoji Extension Packages

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Install the necessary packages for the Emoji extension using Yarn or NPM. This includes `interweave`, `interweave-emoji`, and `emojibase`.

```bash
yarn add interweave interweave-emoji emojibase
```

```bash
npm install interweave interweave-emoji emojibase
```

--------------------------------

### Install Interweave Emoji Picker with NPM

Source: https://github.com/milesj/interweave/blob/master/packages/emoji-picker/README.md

Install the necessary Interweave packages using NPM. This includes the core Interweave library, emoji extension, emoji picker, and Emojibase.

```bash
npm install interweave interweave-emoji interweave-emoji-picker emojibase
```

--------------------------------

### Custom Interweave Component

Source: https://github.com/milesj/interweave/blob/master/website/docs/compose.md

This example shows how to create a reusable Interweave component with pre-configured global filters and matchers, including platform-specific hashtag URLs and emoji path configurations. It extends the base Interweave component to allow for additional props like 'twitter' and 'instagram' to customize hashtag linking.

```tsx
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}
		/>
	);
}

```

--------------------------------

### Basic Hashtag Matching

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Demonstrates how to use the HashtagMatcher to link a simple hashtag within content. Ensure Interweave and HashtagMatcher are imported.

```tsx
import { Interweave } from 'interweave';
import { HashtagMatcher } from 'interweave-autolink';

<Interweave content="Hashtag: #interweave" matchers={[new HashtagMatcher('hashtag')]} />;
```

--------------------------------

### Using doMatch Helper Method

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Simplify the `match` method implementation in a class-based matcher by using the `doMatch` helper. This method handles the null checking and object building logic, requiring only the regex pattern and a callback to construct the match response object.

```typescript
class CustomMatcher extends Matcher<CustomProps> {
	// ...

	match(string: string): MatchResponse<{ extraProp: string }> | null {
		return this.doMatch(string, /foo/, (matches) => ({
			extraProp: 'foo',
		}));
	}
}
```

--------------------------------

### Custom Matcher with Component Factory

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Instantiate a custom matcher by providing a component reference to its constructor. This allows for customized rendering of matched content.

```typescript
new CustomMatcher('foo', {}, SomeComponent);
```

--------------------------------

### Custom Hashtag URL Configuration

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Shows how to configure the URL for hashtags using a string template or a function. The {{hashtag}} token or the hashtag string itself will be interpolated into the URL.

```tsx
<Interweave
  hashtagUrl="https://twitter.com/hashtag/{{hashtag}}"
  matchers={[new HashtagMatcher('hashtag')]} 
/>
```

```tsx
// OR

<Interweave
  hashtagUrl={hashtag => `https://twitter.com/hashtag/${hashtag}`}
  matchers={[new HashtagMatcher('hashtag')])}
/>
```

--------------------------------

### Import EmojiMatcher and Interweave

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Import the `Interweave` component and the `EmojiMatcher` from their respective packages to enable emoji matching.

```tsx
import { Interweave } from 'interweave';
import { EmojiMatcher } from 'interweave-emoji';
```

--------------------------------

### Basic Markup Component Usage

Source: https://github.com/milesj/interweave/blob/master/website/docs/index.mdx

Render simple HTML content using the Markup component when matchers or filters are not required. Ensure Markup is imported.

```tsx
import { Markup } from 'interweave';

<Markup content="This string <b>contains</b> HTML." />;
```

--------------------------------

### Link IP Addresses with IpMatcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Use the IpMatcher to automatically link valid IPv4 addresses within content. Ensure the IpMatcher is used when you need to specifically handle IP addresses.

```tsx
import { Interweave } from 'interweave';
import { IpMatcher } from 'interweave-autolink';

<Interweave content="IP: 127.0.0.1" matchers={[new IpMatcher('ip')]} />;
```

--------------------------------

### Set Default Group and Skin Tone

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Define the initially selected group tab using `defaultGroup` and the default skin tone with `defaultSkinTone`.

```tsx
<EmojiPicker defaultGroup="food-drink" defaultSkinTone="medium" />
```

--------------------------------

### Polyfill DOM for SSR

Source: https://github.com/milesj/interweave/blob/master/packages/ssr/README.md

Import and run the polyfill function to enable server-side rendering capabilities for Interweave.

```typescript
import { polyfill } from 'interweave-ssr';

polyfill();
```

--------------------------------

### Interweave Component with Matchers

Source: https://github.com/milesj/interweave/blob/master/website/docs/index.mdx

Utilize matchers with the Interweave component to automatically convert URLs and hashtags into anchor links. Import necessary matchers.

```tsx
import { Interweave } from 'interweave';
import { UrlMatcher, HashtagMatcher } from 'interweave';

<Interweave
	content="This contains a URL, https://github.com/milesj/interweave, and a hashtag, #interweave, that will be converted to an anchor link!"
	matchers={[new UrlMatcher('url'), new HashtagMatcher('hashtag')]}
/>;
```

--------------------------------

### Mention Autolinking with Function URL

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Configure MentionMatcher with a function for mentionUrl to dynamically generate the link. The function receives the matched mention as an argument.

```tsx
<Interweave
  matchers={[new MentionMatcher('mention')]} 
  mentionUrl={mention => `http://domain.com/user/${mention}`}
/>
```

--------------------------------

### Import Emoji Picker Component

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Import the EmojiPicker component from the 'interweave-emoji-picker' package.

```tsx
import { EmojiPicker } from 'interweave-emoji-picker';
```

--------------------------------

### Basic Box Sizing

Source: https://github.com/milesj/interweave/blob/master/tests/index.html

Sets the box-sizing property to border-box for all elements. This is a fundamental CSS reset.

```css
*{ 
  box-sizing: border-box; 
}
```

--------------------------------

### Configure Emoji Matcher Options

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Configure the EmojiMatcher to support emoticons, shortcodes, and unicode characters by setting the respective `convert` options to true.

```ts
new EmojiMatcher('emoji', {
	convertEmoticon: true,
	convertShortcode: true,
	convertUnicode: true,
});
```

--------------------------------

### Basic Interweave Component Usage

Source: https://github.com/milesj/interweave/blob/master/website/docs/index.mdx

Render simple HTML content safely using the Interweave component. Ensure Interweave is imported.

```tsx
import { Interweave } from 'interweave';

<Interweave content="This string contains <b>HTML</b> and will safely be rendered!" />;
```

--------------------------------

### Adding a Custom Matcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Shows how to add a custom matcher to the Interweave component using the `matchers` prop.

```tsx
<Interweave matchers={[new CustomMatcher('foo')]} />
```

--------------------------------

### Display Emoji as SVG/PNG using emojiPath

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Display emojis as external SVG or PNG files by providing an absolute path to the `emojiPath` prop. The path must include a `{{hexcode}}` token for the emoji's codepoint.

```tsx
<Interweave
  emojiPath="https://example.com/images/emoji/{{hexcode}}.png"
  matchers={[new EmojiMatcher('emoji')]}
/>
```

--------------------------------

### Mention Autolinking with String URL

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Use MentionMatcher with a string-based mentionUrl for linking. The {{mention}} token in the URL will be replaced by the matched username.

```tsx
<Interweave
  matchers={[new MentionMatcher('mention')]} 
  mentionUrl="http://domain.com/user/{{mention}}"
/>
```

--------------------------------

### Create a Custom Filter using an Object

Source: https://github.com/milesj/interweave/blob/master/website/docs/filters.mdx

Alternatively, create a custom filter using a plain object that conforms to the `FilterInterface`. Implement the `attribute` and `node` methods similarly to the class-based approach. Ensure values are returned.

```tsx
import { FilterInterface } from 'interweave';

const filter: FilterInterface = {
	attribute(name, value) {
		if (name === 'href') {
			return encodeURIComponent(value);
		}

		return value;
	},
	node(name, node) {
		if (name === 'a') {
			node.setAttribute('target', '_blank');
		}

		return node;
	},
};
```

--------------------------------

### URL Matching with Interweave

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Use the UrlMatcher to automatically convert URLs found in content into clickable anchor links.

```tsx
import { Interweave } from 'interweave';
import { UrlMatcher } from 'interweave-autolink';

<Interweave
	content="URL: https://github.com/milesj/interweave"
	matchers={[new UrlMatcher('url')]} 
/>;
```

--------------------------------

### Render Emoji Picker Component

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Render the EmojiPicker component with specified emoji sizes and a path function for displaying emojis. The sizing and path props are required.

```tsx
<EmojiPicker emojiSize={24} emojiLargeSize={48} emojiPath={getSvgPathForEmoji} />
```

--------------------------------

### Customize Display Order

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Change the visual order of picker elements (preview, list, search, groups) using the `displayOrder` prop, which accepts an array of strings.

```tsx
<EmojiPicker displayOrder={['groups', 'search', 'emojis', 'preview']} />
```

--------------------------------

### Autolink URLs and Hashtags

Source: https://github.com/milesj/interweave/blob/master/packages/core/README.md

Configure Interweave with `UrlMatcher` and `HashtagMatcher` to automatically convert URLs and hashtags into clickable anchor links.

```tsx
<Interweave
	content="This contains a URL, https://github.com/milesj/interweave, and a hashtag, #interweave, that will be converted to an anchor link!"
	matchers={[new UrlMatcher('url'), new HashtagMatcher('hashtag')]} 
/>
```

--------------------------------

### Create a Custom Filter using a Class

Source: https://github.com/milesj/interweave/blob/master/website/docs/filters.mdx

Extend the base `Filter` class to create a custom filter. Implement the `attribute` and `node` methods to modify attribute values or HTML nodes. Remember to return the modified values or nodes.

```tsx
import { Filter } from 'interweave';

class LinkFilter extends Filter {
	attribute(name: string, value: string): string {
		if (name === 'href') {
			return encodeURIComponent(value);
		}

		return value;
	}

	node(name: string, node: HTMLElement): HTMLElement {
		if (name === 'a') {
			node.setAttribute('target', '_blank');
		}

		return node;
	}
}

const filter = new LinkFilter();
```

--------------------------------

### Autolinking URLs and Hashtags

Source: https://github.com/milesj/interweave/blob/master/packages/autolink/README.md

Use this snippet to automatically convert URLs and hashtags within content into anchor links. Ensure you import and configure the necessary matchers.

```tsx
<Interweave
	content="This contains a URL, https://github.com/milesj/interweave, and a hashtag, #interweave, that will be converted to an anchor link!"
	matchers={[new UrlMatcher('url'), new HashtagMatcher('hashtag')]}
/>
```

--------------------------------

### Class-based Custom Matcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Implement a custom matcher by extending the `Matcher` class. Define the `match`, `replaceWith`, and `asTag` methods to handle matching logic and element replacement. The `match` method should return a `MatchResponse` object containing match details and any extra properties.

```tsx
import { Matcher, MatchResponse, Node } from 'interweave';

class CustomMatcher extends Matcher<CustomProps> {
	match(string: string): MatchResponse<{ extraProp: string }> | null {
		const result = string.match(/foo/);

		if (!result) {
			return null;
		}

		return {
			index: result.index!,
			length: result[0].length,
			match: result[0],
			extraProp: 'foo', // or result[1], etc
			valid: true,
		};
	}

	replaceWith(children: ChildrenNode, props: CustomProps): Node {
		return <span {...props}>{children}</span>;
	}

	asTag(): string {
		return 'span';
	}
}

const matcher = new CustomMatcher('foo');
```

--------------------------------

### Mention Autolinking with Custom URL

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Configure MentionMatcher to link @username patterns to a custom URL. The mentionUrl prop interpolates the matched username using the {{mention}} token.

```tsx
import { Interweave } from 'interweave';
import { MentionMatcher } from 'interweave-autolink';

<Interweave
	content="Hello @username"
	matchers={[new MentionMatcher('mention')]} 

mentionUrl="http://domain.com/user/{{mention}}"
/>;
```

--------------------------------

### Object-based Custom Matcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Create a custom matcher using a plain object that adheres to the `MatcherInterface`. This approach requires defining `inverseName`, `propName`, `match`, `createElement`, and `asTag` properties. The `match` method returns match details, and `createElement` defines the replacement element.

```typescript
import { MatcherInterface } from 'interweave';

const matcher: MatcherInterface<CustomProps> = {
	inverseName: 'noFoo',
	propName: 'foo',
	match(string) {
		const result = string.match(/foo/);

		if (!result) {
			return null;
		}

		return {
			index: result.index!,
			length: result[0].length,
			match: result[0],
			extraProp: 'foo', // or result[1], etc
			valid: true,
		};
	},
	createElement(children, props) {
		return <span {...props}>{children}</span>;
	},
	asTag() {
		return 'span';
	},
};
```

--------------------------------

### Display Emoji as SVG/PNG with Function Path

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Alternatively, provide a function to `emojiPath` that dynamically generates the image path based on the hexcode and size properties.

```tsx
<Interweave
  emojiPath={(hexcode, { size }) => `https://example.com/images/emoji/${size}/${hexcode}.png`}
  matchers={[new EmojiMatcher('emoji')]}
/>
```

--------------------------------

### Customize Picker Styles with CSS

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Style the emoji picker by writing CSS that targets the default class names provided by Interweave. This is useful for global CSS solutions.

```css
.interweave-picker__picker {
	position: 'absolute';
	bottom: 100%;
}
```

--------------------------------

### Disabling All Matchers

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Illustrates how to disable all matchers for a specific Interweave instance by using the `disableMatchers` prop.

```tsx
<Interweave disableMatchers />
```

--------------------------------

### Render Emoji with Interweave

Source: https://github.com/milesj/interweave/blob/master/packages/emoji/README.md

Use the EmojiMatcher to convert unicode, shortcodes, and emoticons to SVGs. Ensure the emojiPath prop is set to a function that provides the SVG path for each emoji.

```tsx
<Interweave
	content="This will convert emoji unicode characters (🌀), shortcodes (:cyclone:), and emoticons to SVGs! :)"
	matchers={[
		new EmojiMatcher('emoji', {
			convertEmoticon: true,
			convertShortcode: true,
		}),
	]}
	emojiPath={getSvgPathForEmoji}
/>
```

--------------------------------

### Set Emoji Padding

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Use the `emojiPadding` prop to adjust the padding around emoji buttons. This prop uses inline styles to ensure accurate width and height calculations.

```tsx
<EmojiPicker emojiPadding={5} />
```

--------------------------------

### Load Emoji Data with useEmojiData Hook

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Use the useEmojiData hook to fetch emoji data from Emojibase's CDN. This hook returns the emoji data, source information, and the data manager instance. It supports options for compactness, locale, shortcodes, error handling, and versioning.

```tsx
import BaseInterweave, { InterweaveProps } from 'interweave';
import { useEmojiData } from 'interweave-emoji';

export default function Interweave(props: InterweaveProps) {
	const [emojis, source, manager] = useEmojiData({ compact: false, shortcodes: ['emojibase'] });

	return <BaseInterweave {...props} emojiSource={source} />;
}
```

--------------------------------

### Link Email Addresses with EmailMatcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Use the EmailMatcher to automatically link email addresses using a "mailto:" target. This matcher should be placed before the UrlMatcher to ensure correct parsing.

```tsx
import { Interweave } from 'interweave';
import { EmailMatcher } from 'interweave-autolink';

<Interweave content="Email: miles@interweave.com" matchers={[new EmailMatcher('email')]} />;
```

--------------------------------

### Convert Shortcodes to Emoji

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Enable the conversion of emoji shortcodes (e.g., :cyclone:) to their unicode equivalents by setting `convertShortcode` to true in the EmojiMatcher options.

```tsx
<Interweave
	content="Emoji shortcode: :cyclone:"
	matchers={[new EmojiMatcher('emoji', { convertShortcode: true })]}
/>
```

--------------------------------

### Mock Emoji Data for Testing

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Use the `mockEmojiData()` function from `interweave-emoji/test` to mock emoji data during testing, avoiding the need to fetch it. Call this during your testing framework's bootstrap. It defaults to English data but can be called with locale codes like 'fr' to support additional locales, though the data remains in English.

```typescript
import { mockEmojiData } from 'interweave-emoji/test';

mockEmojiData();
```

```typescript
mockEmojiData('fr'); // For other locales
```

--------------------------------

### Add Custom TLDs to UrlMatcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Extend the UrlMatcher's validation by providing a list of custom Top-Level Domains (TLDs).

```typescript
new UrlMatcher('url', { customTLDs: ['life', 'tech', 'ninja'] });
```

--------------------------------

### Hide Preview Details

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Control the visibility of emoticons and shortcodes within the preview area using `hideEmoticon` and `hideShortcodes`. Group headers can also be hidden with `hideGroupHeaders`.

```tsx
<EmojiPicker hideEmoticon hideGroupHeaders />
```

--------------------------------

### Safely Render HTML

Source: https://github.com/milesj/interweave/blob/master/packages/core/README.md

Use the Interweave component to render HTML content safely without `dangerouslySetInnerHTML`. This prevents XSS attacks.

```tsx
<Interweave content="This string contains <b>HTML</b> and will safely be rendered!" />
```

--------------------------------

### Enable Greedy Matching in Custom Matcher (Object)

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Configure a custom matcher object by setting the `greedy` property to `true`. This ensures the matcher repeatedly processes the entire string, which is beneficial for complex matching scenarios.

```typescript
import { MatcherInterface } from 'interweave';

const matcher: MatcherInterface<CustomProps> = {
	greedy: true,

	// ...
};
```

--------------------------------

### Customize Picker Styles with Class Names

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Provide custom class names to the `classNames` prop for advanced styling with CSS modules or CSS-in-JS. This offers more control over component styling.

```tsx
<EmojiPicker
	classNames={{
		picker: 'picker-7sa92dsd',
	}}
/>
```

--------------------------------

### Demo Grid Item Spacing

Source: https://github.com/milesj/interweave/blob/master/tests/index.html

Adds right margin to direct children of the demo grid. Controls spacing between grid items.

```css
.demo-grid > * {
  margin-right: 10px;
}
```

--------------------------------

### Disabling a Single Matcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Explains how to disable a specific matcher by using a prop named 'no' followed by the matcher's unique name.

```tsx
<Interweave noFoo />
```

--------------------------------

### Enable Unicode Rendering for EmojiMatcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Pass the `renderUnicode` option to the `EmojiMatcher` constructor to display native unicode characters directly. This overrides SVG or PNG rendering and works well with shortcode or emoticon conversion.

```typescript
new EmojiMatcher('emoji', { renderUnicode: true });
```

--------------------------------

### Translate Picker Messages

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Localize picker messages by providing an object of message keys to translated strings via the `messages` prop. Set the `locale` prop to specify the language.

```tsx
<EmojiPicker
	locale="ja"
	messages={{
		search: 'サーチ',
	}}
/>
```

--------------------------------

### Body Font Styling

Source: https://github.com/milesj/interweave/blob/master/tests/index.html

Defines the base font size and family for the document body. Ensures consistent typography.

```css
body {
  font-size: 14px;
  font-family: Verdana, sans-serif;
}
```

--------------------------------

### Configure Commonly Used Emojis

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Customize the behavior of the 'commonly used' emoji history with `commonMode` and `maxCommonlyUsed` props. Emojis are stored in local storage.

```tsx
<EmojiPicker commonMode="frequently-used" />
```

--------------------------------

### Allow Only Specific Emojis

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Use the `allowList` prop to restrict the picker to only display a predefined set of emojis. Accepts an array of hexcodes.

```tsx
// Only trees
<EmojiPicker
	allowList={[
		'1F332', // evergreen
		'1F333', // deciduous
		'1F334', // palm
		'1F384', // christmas
		'1F38B', // tanabata
	]}
/>
```

--------------------------------

### Replace HTML Elements with Custom React Components

Source: https://github.com/milesj/interweave/blob/master/website/docs/parser.md

Use the `transform` prop to replace specific HTML elements with custom React components. This function receives the parsed DOM node and its children, allowing you to return a custom React element, use the default `<Element />` component, or skip the element.

```tsx
import { Interweave, Node } from 'interweave';

function transform(node: HTMLElement, children: Node[]): React.ReactNode {
	if (node.tagName === 'A') {
		return <Link href={node.getAttribute('href')}>{children}</Link>;
	}
}

<Interweave transform={transform} />;
```

--------------------------------

### Enable Greedy Matching in Custom Matcher (Class)

Source: https://github.com/milesj/interweave/blob/master/website/docs/matchers.mdx

Set the `greedy` property to `true` within a custom matcher class to ensure it continually runs against the entire string in each iteration until fully exhausted. This is useful when your matcher uses multiple patterns or needs to find matches at any point in the string.

```tsx
import { Matcher } from 'interweave';

class CustomMatcher extends Matcher<CustomProps> {
	greedy: boolean = true;

	// ...
}
```

--------------------------------

### Customize Group Icons

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Pass an object of React nodes to the `groupIcons` prop to replace default group tab icons. This allows for custom visual representation of emoji categories.

```tsx
<EmojiPicker
	groupIcons={{
		activities: <IconBasketball />,
	}}
/>
```

--------------------------------

### Configure Automatic Emoji Enlargement

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Control the automatic enlargement of emojis when they are the sole character in content. Set `enlargeThreshold` to 0 to disable this functionality, or increase the value to raise the threshold for enlargement.

```typescript
new EmojiMatcher('emoji', { enlargeThreshold: 3 });
```

--------------------------------

### Apply Filters to Interweave Component

Source: https://github.com/milesj/interweave/blob/master/website/docs/filters.mdx

Use the `filters` prop to pass an array of filter instances to the Interweave component. To disable all filters, use the `disableFilters` prop.

```tsx
<Interweave filters={[new LinkFilter()]} />
```

```tsx
<Interweave disableFilters />
```

--------------------------------

### Control Emoji List Dimensions

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Adjust the number of visible emojis in the list by setting the `columnCount` and `rowCount` props.

```tsx
<EmojiPicker columnCount={15} rowCount={5} />
```

--------------------------------

### Control Emoji Image Size

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Control the display size of emoji images using the `emojiSize` and `emojiLargeSize` props. These can accept numbers (for pixels) or strings (for relative units like 'em').

```tsx
<Interweave emojiSize={32} emojiLargeSize={96} /> // 32px, 96px
```

```tsx
<Interweave emojiSize="1em" emojiLargeSize="3em" /> // 1em, 3em
```

--------------------------------

### Render Emoji Unicode Character

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Display a simple emoji unicode character using the `Interweave` component and the `EmojiMatcher`.

```tsx
<Interweave content="Emoji unicode character: 🌀" matchers={[new EmojiMatcher('emoji')]} />
```

--------------------------------

### Convert Emoticons to Emoji Characters

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji.mdx

Enable emoticon conversion by passing the `convertEmoticon: true` option to the EmojiMatcher. This allows emoticons like :) to be rendered as their corresponding emoji characters. A list of supported emoticons is available in the Emojibase repository.

```tsx
<Interweave
	content="Smiley faces :) ;p :>]"
	matchers={[new EmojiMatcher('emoji', { convertEmoticon: true })]}
/>
```

--------------------------------

### Button Focus Outline Removal

Source: https://github.com/milesj/interweave/blob/master/tests/index.html

Removes the default outline when a button is focused. Use with caution to maintain accessibility.

```css
button:focus {
  outline: none;
}
```

--------------------------------

### Disable Picker Elements

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Hide specific interactive elements like search or skin tone palettes using boolean props such as `disableSearch` and `disableSkinTones`.

```tsx
<EmojiPicker disableSearch disableSkinTones />
```

--------------------------------

### Block Specific Emojis

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/emoji-picker.mdx

Use the `blockList` prop to prevent certain emojis from being displayed. Accepts an array of hexcodes.

```tsx
<EmojiPicker
	blockList={[
		'1F4A9', // poop
		'1F52B', // gun
	]}
/>
```

--------------------------------

### Disable TLD Validation for UrlMatcher

Source: https://github.com/milesj/interweave/blob/master/website/docs/exts/autolink.mdx

Configure the UrlMatcher to disable Top-Level Domain (TLD) validation, allowing for a broader range of URL patterns.

```typescript
new UrlMatcher('url', { validateTLD: false });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.