I have this React Component which contains a description text.
The entire description (the link and the plain text) comes in one string variable:
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).
Question posted in Javascript
A very good W3school tutorial can be found here.
A very good W3school tutorial can be found here.
3
Answers
Use an icon library like
react-icons
, for example.Install:
npm i react-icons
Then import the icon in your React component:
Use it within the JSX:
It contains icons from multiple popular sources, including material design icons and FontAwesome (The free version).
I think you need break the url become another text, like this:
After that, create a component
First of all you need to identify the URL using regular expression to match URLs as follow :
Then map your description and handle rendering based on the regex rule:
and this is the function to handle copy action:
In general that should give you the desired feature, Good luck and happy coding.