Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to insert icons inside text in React.js

I have this React Component which contains a description text.
The entire description (the link and the plain text) comes in one string variable:
enter image description here
Sometimes the description can contain more than one link.
I need to add a "Copy" Icon and a "Open in new tab" Icon at the end of the link (where the red arrow points).

Tags:

3

Answers


  1. 0

    Use an icon library like react-icons, for example.

    Install: npm i react-icons

    Then import the icon in your React component:

    import { FaCopy } from "react-icons/fa";

    Use it within the JSX:

    <p>
  <FaCopy /> TEXT BESIDES THE ICON
</p>

    It contains icons from multiple popular sources, including material design icons and FontAwesome (The free version).

    Login or Signup to reply.
  2. 0

    I think you need break the url become another text, like this:

    function splitText(text) {
    const urlRegex = /(https?://[^s]+)/;
    const urlMatch = text.match(urlRegex);
    let result = {
        'textBeforeUrl': text,
        'url':'',
        'textAfterUrl':''
    }
  
    if (!urlMatch) {
        return result
    }
  
    const url = urlMatch[0];
    const index = text.indexOf(url);
    const textBeforeUrl = text.substring(0, index);
    const textAfterUrl = text.substring(index + url.length);
    result.textBeforeUrl = textBeforeUrl;
    result.url = url;
    result.textAfterUrl = textAfterUrl;
    return result
}

    After that, create a component

    const textResult = splitText(text)
<span>
 <p>{textResult.textBeforeUrl}</p>
 <p>{textResult.url}</p><Icon/>
 <p>{textResult.textAfterUrl}</p>
</span>
    Login or Signup to reply.
  3. 0

    First of all you need to identify the URL using regular expression to match URLs as follow :

    const description = "YOUR_DESCRIPTION_HERE"
const urlRegex = /(https?://[^s]+)/g;
const segments = description.split(urlRegex);

    Then map your description and handle rendering based on the regex rule:

    <div>
  {segments.map((segment, index) => {
    if (segment.match(urlRegex)) {
      // THIS IS LINK ->
      return (
        <span key={index}>
          {segment}
          <button onClick={() => handleCopy(segment)}>Copy</button>
          <a href={segment} target="_blank" rel="noopener noreferrer">Open in new tab</a>
        </span>
      );
    } else {
      // THIS IS PLAIN TEXT ->
      return <span key={index}>{segment}</span>;
    }
  })}
</div>

    and this is the function to handle copy action:

    const handleCopy = (link) => {
  navigator.clipboard.writeText(link)
    .then(() => console.log('Link copied to clipboard'))
    .catch((error) => console.error('Failed to copy link:', error));
};

    In general that should give you the desired feature, Good luck and happy coding.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search