Filters

Filters provide an easy way of cleaning HTML attributes and nodes during the parsing cycle. This is especially useful for src and href attributes.

Usage#

Filters can be added to each instance of <Interweave /> through the filters prop.

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

To disable all filters, pass the disableFilters prop.

<Interweave disableFilters />

Creating a filter#

Creating a custom filter is easy. Extend the base Filter class, or use a plain object, and define the attribute or node methods. These methods receive the attribute or tag name as the 1st argument, and the value as the 2nd, respectively.

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();

Attribute values and nodes must be returned from filter methods!

Returning null for a node will remove it from the DOM tree.