Not correctly searching in nested elements

[McPo]

Im attempting to use react-linkify with react-highlight-words (https://github.com/bvaughn/react-highlight-words/blob/master/src/Highlighter.js)

However it appears linkify is not finding the text.

<Linkify properties={ { target: '_blank' } }><Highlighter searchWords={ this.props.highlight } textToHighlight={ msg.body }>{ msg.body }</Highlighter></Linkify>

Its not an issue with the resulting DOM, as mimicking the DOM as input still works.

<Linkify properties={ { target: '_blank' } }><span><span>{ msg.body }</span></span></Linkify>

It appears to be caused by the fact that react-highlight doesn't place the text as a child, but a prop instead.

[McPo]

I ended up moving to https://www.npmjs.com/package/react-highlighter instead, which uses child props for the main text (I didn't use it initially as I wasn't aware that it supported RegExp), and all works fine.

Maybe make a note regarding it only searches child props?

[mhemrg]

#78 (comment)

[AHTHneeuhl]

import Linkify  from "react-linkify";
import Highlight from "react-highlighter";

<Linkify>
  <Highlight search={keywords}>{text}</Highlight>
</Linkify>