linkify-react with JSX input?

[tordans]

I can pass react children to <Linkify> using linkify-react. That does handle links inside html tags that I pass to <Linkify> directly.

However, when I pass my text through a JSX helper that adds new lines, the links are not linkified anymore.

This is my helper

import { Fragment } from 'react'

type Props = { input: string }
export const Nl2br = ({ input }: Props) => {
  return (
    <>
      {input.split('\n').map((line, index) => (
        <Fragment key={index}>
          {line}
          <br />
        </Fragment>
      ))}
    </>
  )
}

I will work around this using CSS to render the new lines, how (https://www.dhiwise.com/post/react-line-break-techniques-for-better-text-formatting).

But it would be great to learn how this would work…

[nfrasser]

Hi @tordans, I suspect this doesn't work because the Nl2br component takes input as a prop, i.e., <Nl2br input={input} />. Linkify only attempts detecting links in text nodes, not in properties.

Have you tried the nl2br option for Linkify?
e.g.,

<Linkify options={{ nl2br: true }}>
    {input}
 </Linkify>

If you would prefer to use your Nl2br component, you could try re-writing it to accept its contents as children, i.e.,:

<Linkify>
    <Nl2br>{input}</Nl2br>
</Linkify>

But this would complicate your implementation because now you'd have to parse through a list of children, not all of which may be text nodes. Unless you plan to add other behaviour to your Nl2br component, Linkify's nl2br option is probably the easier solution.

[tordans]

Thanks @nfrasser I overlooked that option even after looking for it :). It is right was I needed and I can remove my custom helper / custom CSS.