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

#colbyfayock #reactjs #tailwindcss #webdevelopment

[tobiasjennerjahn]

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.

[blokche_dev]

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

[sakarvaidya]

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

[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 ?

[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?

[iplaxtech]

Thanks for sharing, it's very useful :)

[MyGeorge]

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

[scottfwalter]

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