Born from a challenge against a friend. This is a simple component that take two props and highlights the given text. For example:
<Highlight word={'world'} wrap={word => <strong>{word}</strong>}>
Hello, world!
</Highlight>
You should get:
<span>Hello, <strong>world</strong><span>!
It doesn't use dangerouslySetInnerHTML
or any hidden feature/trickery. And it also takes advantage of native diffing (as it has key prop), so don't worry about performance.