Help with autolinking

[MikeWillis]

I'm sorry but I'm confused by the documentation. Can anyone point me in the right direction for autolinking content pulled from my wordpress blog? I'm using react on the front end, and wordpress' built-in json api to pull the html of each blog post.

I won't know the link text or link url beforehand, obviously. I would like to use interweave to parse the incoming html and turn it into a jsx element, and replace the anchor tags with my own component. Can that be done?

For example something like:

import { Markup, Interweave } from 'interweave';
import { UrlMatcher } from 'interweave-autolink';

import MyOwnLinkComponent from "somewhere";

const MyComponent = props => {
	
	let ajaxContent = "<p>this is a blog post with a <a href='https://www.example.com/wherever/'>link somewhere</a>";

	return (
		<div>
			<Interweave
				content={ajaxContent}
				matchers={[new UrlMatcher(ajaxContent)]}
			/>
		</div>
	);
};

with the idea being that the anchor tag in the incoming content gets replaced with something like:

<MyOwnLinkComponent to={href}>{linkText}</MyOwnLinkComponent>

[milesj]

@MikeWillis Autolinking just wraps URLs with a tags. You need to use transform to actually replace them: https://interweave.dev/docs/parser#replacing-elements

[MikeWillis]

@milesj that's what I was missing, thanks!