{"id":14177,"date":"2024-03-15T08:36:53","date_gmt":"2024-03-15T08:36:53","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/"},"modified":"2025-08-06T04:57:47","modified_gmt":"2025-08-06T04:57:47","slug":"how-does-react-implement-front-end-selection","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/","title":{"rendered":"React Frontend Selection Implementation Guide"},"content":{"rendered":"<p>To implement the front-end selection, you can use useRef and useState in React to manage the selection state and use the window.getSelection() method to retrieve selection information.<\/p>\n<p>Firstly, define a ref in the component to store the selection and a state to store the selection status.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">App<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-keyword\">const<\/span> [selection, setSelection] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-literal\">null<\/span>);\r\n  <span class=\"hljs-keyword\">const<\/span> textRef = <span class=\"hljs-title function_\">useRef<\/span>(<span class=\"hljs-literal\">null<\/span>);\r\n\r\n  <span class=\"hljs-comment\">\/\/ \u5904\u7406\u9009\u533a\u53d8\u5316\u7684\u51fd\u6570<\/span>\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleSelectionChange<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n    <span class=\"hljs-keyword\">const<\/span> selectedText = <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-title function_\">getSelection<\/span>().<span class=\"hljs-title function_\">toString<\/span>();\r\n    <span class=\"hljs-title function_\">setSelection<\/span>(selectedText);\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{textRef}<\/span> <span class=\"hljs-attr\">onMouseUp<\/span>=<span class=\"hljs-string\">{handleSelectionChange}<\/span>&gt;<\/span>\r\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\u9009\u4e2d\u7684\u6587\u672c\uff1a{selection}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n}\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">App<\/span>;\r\n<\/code><\/pre>\n<p>Next, add an onMouseUp event handler to the div element, which will be triggered when the mouse is released. Inside the function, we use window.getSelection().toString() to retrieve the selected text and set it as the selected state.<\/p>\n<p>Finally, render the selected text on the page to achieve front-end selection functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To implement the front-end selection, you can use useRef and useState in React to manage the selection state and use the window.getSelection() method to retrieve selection information. Firstly, define a ref in the component to store the selection and a state to store the selection status. import React, { useState, useRef } from &#8216;react&#8217;; function [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[12455,19096,19097,19098,19099],"class_list":["post-14177","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-react-hooks","tag-react-selection","tag-useref","tag-usestate","tag-window-getselection"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Frontend Selection Implementation Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Frontend Selection Implementation Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T08:36:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-06T04:57:47+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"React Frontend Selection Implementation Guide\",\"datePublished\":\"2024-03-15T08:36:53+00:00\",\"dateModified\":\"2025-08-06T04:57:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\"},\"wordCount\":104,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"react hooks\",\"React selection\",\"useRef\",\"useState\",\"window.getSelection\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\",\"name\":\"React Frontend Selection Implementation Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T08:36:53+00:00\",\"dateModified\":\"2025-08-06T04:57:47+00:00\",\"description\":\"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Frontend Selection Implementation Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Frontend Selection Implementation Guide - Blog - Silicon Cloud","description":"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/","og_locale":"en_US","og_type":"article","og_title":"React Frontend Selection Implementation Guide","og_description":"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.","og_url":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T08:36:53+00:00","article_modified_time":"2025-08-06T04:57:47+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"React Frontend Selection Implementation Guide","datePublished":"2024-03-15T08:36:53+00:00","dateModified":"2025-08-06T04:57:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/"},"wordCount":104,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["react hooks","React selection","useRef","useState","window.getSelection"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/","url":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/","name":"React Frontend Selection Implementation Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T08:36:53+00:00","dateModified":"2025-08-06T04:57:47+00:00","description":"Learn how to implement front-end selection in React using useRef and useState. Step-by-step guide for React developers.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-implement-front-end-selection\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Frontend Selection Implementation Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/14177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=14177"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/14177\/revisions"}],"predecessor-version":[{"id":158201,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/14177\/revisions\/158201"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=14177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=14177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=14177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}