Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for nested react element #41

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ramjak
Copy link

@ramjak ramjak commented Apr 11, 2019

No description provided.

@lucatk
Copy link

lucatk commented Apr 3, 2020

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

@iansinnott
Copy link
Owner

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
Copy link

lucatk commented May 2, 2020

@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
Copy link

slobo commented Jul 7, 2021

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
Copy link

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
Copy link

@iansinnott any update for bringing this in?

@iansinnott
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants