add support for nested react element

[ramjak]

[lucatk]

+1 @iansinnott can this be merged? Would be really valuable for some cases (nested formatting for example).

[iansinnott]

OH this must have slipped my notice. I'll take a look.

@lucatk what's the use case here? I see you mentioned nested formatting, but can you elaborate?

Looking at the test that was asdded:

reactStringReplace(<div>hey there you</div>, 'you', x => `(${x})`)

And the way you would do this currently without this PR:

<div>{reactStringReplace('hey there you', 'you', x => `(${x})`)}</div>

I don't see what functionality this PR adds.

[lucatk]

@iansinnott If you look at the first parameter of reactStringReplace() in the two examples you provided, the difference is in the first on the function can be passed an already existing React component, whereas currently only strings can be passed. For one, this makes it possible to receive, say, children passed to my custom component and have their content replaced, no matter if the component is being passed a String or another Component. Also as I mentioned, this enables nesting multiple reactStringReplace() calls inside each other to be able to, for instance, use formatting literals like ** for bold and __ for underline and having them complimented. Like this:

reactStringReplace(
    reactStringReplace(
        'I want to be **__bold and underlined__**!',
        /\*\*(.*)\*\*/g,
        match => <span className="bold">{match}</span>
    ),
    /__(.*)__/g,
    match => <span className="underline">{match}</span>
);

[slobo]

We would also need this. Currently, only the "world" that is not in the <strong> would get replaced in the following example:

reactStringReplace(<div>world, <strong>world</strong>!</div>, 'world', () => '🌎');

[garrettXCIV]

This is helpful. I just added it to the code in my own project and it solved my problem.

I was trying to take a page of text and wrap all the ** wrapped sections with and all the * wrapped sections with , and because the tags from the first string replace broke the element up into multiple child nodes, the regex for a single * wasn't picking up matches across the full text anymore. It was only reading what was between one set of tags at a time, when there were places with the starting * in one node, and the ending * in another. Like I said, his change fixed it for me.

[cwbutler6]

@iansinnott any update for bringing this in?

[iansinnott]

Would anyone care to update this PR to resolve conflicts? I can see the appeal. cc @cwbutler6

It looks like the main conflict is the use of Lodash, and including React as a dependency. We no longer use lodash in master and react should be a peer dependency.