![]() ![]() Ill show you how to be more productive and set your homepage to what you want. Now that we have the hook, we can use it in any component to get the Selection object and its string value. Sometimes installers change your browser home page 'for you'. In this case, that means storing our selected text: We’re going to access them in the useEffect hook and store the values we draw from them using the useState hook. But note that in SSR React apps, the window and document are only accessible within specific react-lifecycle methods. First we’re going to want to import useState and useEffect from React. So let’s make a React hook that returns selected text and Selection object. Moreover, we probably want keep this separate from the components that use the selected text. Since we’re working with an SSR React application however, the document isn’t going to be available just anywhere. This is the object that stores “the range of text selected by the user or the current position of the caret.” Specifically, we’re going to want Selection.toString() since that’s what returns the selected text we’d like to share with our peeps. Getting the selected text from the documentįirst off, you’re going to want an easy way to reference the Selection object. ![]() So in the next few blog posts I’ll be detailing some tips and tricks I used to create a medium-like sharing tooltip. But I was surprised just how much work it takes to do it right, especially in SSR React applications. ![]() I’ve always wanted to implement something like Medium’s highlighting and sharing tooltip. Luis Ball blog Browser Selection API tricks ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |