Get Selected Text in React

Use the Selection API to get selected text in React and show a social media sharing tooltip.
We'll walk through how to use the Selection API to listen for selected text, how to build out a dynamically placed tooltip based on selected text location using Tailwind, and how to share the selected text on click to Twitter.
🧰 Resources
Tutorial: spacejelly.dev...
Code: github.com/col...
Demo: my-highlight-s...
📺 KZbin: kzbin.info...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #reactjs #tailwindcss #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@tobiasjennerjahn8659]

I *love* this video. The way you talk could not be more perfect. It's quick, but not hectic and it's detailed, but not overwhelmingly so. I don't know how much of that is a deliberate style choice, but whatever you do, please keep doing it. It's refreshingly snappy. I also saw your new Next.js course and that's looking like it is *exactly* what I need. I'm familiar with web dev but have been out of the game for about two years now and all of my professional work was done using Svelte. Finding react resources aimed at someone like me is borderline impossible. This looks like it'll get me up and running in one fell swoop. Amazing.

[@colbyfayock]

really appreciate the kind words. it's absolutely intentional. glad it's been impactful for you!!

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@blokche_dev]

Whether you're using React or not, there's still something to learn here. Thanks for sharing!

[@colbyfayock]

no problem!! 🙌

[@leonardocitton4627]

Thanks Colby, I needed this video ❤

[@leonardocitton4627]

And your coding skills are great!

[@colbyfayock]

No problem and thank you!!

[@sammed.sankonatti]

Absolutely brilliant work 👏

[@colbyfayock]

thank you!

[@jawyor-k3t]

Outstanding as always

[@colbyfayock]

Thank you!!

[@tiger_chew]

thanks for sharing , I found it works on desktop browser, but it does not work on the iPhone or Android mobile phone browser , is there a solution for the mobile browser ?

[@colbyfayock]

yeah unfortunately i didnt get a good experience working in mobile. sometime was able to get it to pop up but not consistently. i _think_ i mentioned the caveat in the video, apologies if i forgot to, but also iOS at a minimum has their own popup in-browser, so that would conflict with the UI at least for this example

[@sakarvaidya9665]

I was working on this. But on mobile devices it doesn't work. Mostly because of the touchend event. Any solution?

[@colbyfayock]

unfortunately havent come up with a good solution. part of hte issue is at a minimum iOS devices have their own tooltip prompt that would conflict with this, regardless of how the interaction would work. perhaps instead of a tooltip it could be a drawer fixed to the bottom of the page to avoid that

[@yasseraouffen]

Thanks a million

[@colbyfayock]

🫶

[@Collect-AI]

great video. I'm creating a Chrome extension and would like to add this feature for users to access on any website/page they go on. I've seen it being done with other chrome extensions I use. How can this be implemented in the code?

[@colbyfayock]

I'm not familiar with building expenstiins but I would expect you'd set up the event listeners similarly to how I did in the beginning as vanilla JS.

[@Collect-AI]

Thank for getting back. So the process you show in the video allows the user to copy text from any webpage they are on?@@colbyfayock

[@iplaxtech]

Thanks for sharing, it's very useful :)

[@colbyfayock]

No problem!

[@MyGeorge1964]

Thank v. much... V. useful bit of code.

[@colbyfayock]

No problem 🙌

[@scottfwalter]

Please don’t. I find that feature the most annoying part of Medium. I want to just use native copy functionality.

[@colbyfayock]

I like it 🤷‍♂️ but it's also not impeding you from doing so either