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.

Class

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

Object

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;
    },
};

Attribute values and nodes must be returned from filter methods!

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