{"id":23120,"date":"2022-11-08T10:00:00","date_gmt":"2022-11-08T18:00:00","guid":{"rendered":"https:\/\/coderpad.io\/?p=23120"},"modified":"2023-06-05T13:54:29","modified_gmt":"2023-06-05T20:54:29","slug":"how-to-build-a-url-shortener-in-react-with-shrtcode","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-build-a-url-shortener-in-react-with-shrtcode\/","title":{"rendered":"How to Build a URL Shortener in React with Shrtcode"},"content":{"rendered":"\n<p>URLs tends to get lengthy, especially when parameters and query strings are attached. This can&nbsp; get annoying when you want to share a link.&nbsp;For example, long URLs can eat into your character limit on social media platforms. Because of this, websites offering URL-shortening services like <a href=\"https:\/\/bitly.com\/\" target=\"_blank\" rel=\"noopener\">Bitly<\/a>, <a href=\"https:\/\/tinyurl.com\/app\" target=\"_blank\" rel=\"noopener\">TinyURL<\/a>, and <a href=\"https:\/\/short.io\/\" target=\"_blank\" rel=\"noopener\">Short.io<\/a> have cropped up.<\/p>\n\n\n\n<p>A URL shorterner is a tool that reduces the length of website addresses, creating a short, unique link that redirects to the desired web page when clicked. This makes the URL easier to share, remember, and track. The new unique URL generated usually includes the shortener site\u2019s address and a combination of random letters. <\/p>\n\n\n\n<p>For example, if you want to shorten <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/\"><\/a><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/\">https:\/\/coderpad.io\/resources\/docs\/interview\/<\/a> with Shrtcode, the resulting URL will look like this: <a href=\"https:\/\/shrtco.de\/gAlA24W\" target=\"_blank\" rel=\"noopener\">h<\/a><a href=\"https:\/\/shrtco.de\/xBcIt\" target=\"_blank\" rel=\"noopener\">ttps:\/\/shrtco.de\/xBcIt<\/a> where the site\u2019s address is <a href=\"https:\/\/shrtco.de\" target=\"_blank\" rel=\"noopener\"><\/a><a href=\"https:\/\/shrtco.de\" target=\"_blank\" rel=\"noopener\">https:\/\/shrtco.de<\/a> and the rest after the slash is the identifier for the link generated by the API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is URL shortening?<\/h2>\n\n\n\n<p>URL shortening is achieved by storing the origin link along with the random letters attached to the shortened URL in a database. When the short URL is clicked, the server uses the random number to get the original link and then redirects to it. Of course, doing this requires creating a backend. <\/p>\n\n\n\n<p>In this tutorial, we will be using the <a href=\"https:\/\/shrtco.de\/docs\" target=\"_blank\" rel=\"noopener\">Shrtcode API<\/a> to achieve this functionality, so we won&#8217;t be doing any of the behind-the-scenes stuff.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros and Cons of URL shorteners<\/h3>\n\n\n\n<p>As <em>Moneyball<\/em> author <a href=\"https:\/\/quotefancy.com\/quote\/1296483\/Michael-Lewis-There-s-something-bad-in-everything-good-and-something-good-in-everything\" target=\"_blank\" rel=\"noopener\">Michael Lewis<\/a> said, \u201cThere&#8217;s something bad in everything good and something good in everything bad.\u201d Let\u2019s find out what those are for URL shorteners.<\/p>\n\n\n\n<p><strong>Pros of URL shorteners:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>They promote sharing<\/strong>: Adding shortened URLs on printed materials reduces the number of words readers have to type to copy it. They also make sharing easier in messaging technologies that limit the number of characters in a message.<\/li>\n\n\n\n<li><strong>Creates a friendlier URL<\/strong>: Most URL shorteners can be used to generate custom links rather than random numbers in order to make URLs intuitive, more appealing, and easy to remember. These custom links act as an abstraction to a more lengthy URL which might include encodings and characters that may be confusing to the average reader.<\/li>\n\n\n\n<li><strong>Provides analytics data<\/strong>: Most URL shorteners include features to track the performance of links, giving information on click-throughs and traffic sources. Businesses can then use this information to inform their content distribution strategies.<\/li>\n<\/ul>\n\n\n\n<p><strong>Cons of URL shorteners:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dead links<\/strong>: If the server of the tool that was used to shorten the URLs is down, all links will stop working.<\/li>\n\n\n\n<li><strong>Blocked URLs<\/strong>: Some platforms do not accept shortened URLs and a number of URL shorteners have been included on spam blacklists. Sites that have been blacklisted for sending spam tend to use URL shorteners to bypass the blacklist which has made many URL shorteners meet the same fate.<\/li>\n\n\n\n<li><strong>Facilitates phishing attacks<\/strong>: Since URLs shorteners obscure the address of a site with random numbers, shortened URLs are used by scammers to drive users to URLs and websites that look legitimate but are specifically designed to collect sensitive information.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is Shrtcode<\/h2>\n\n\n\n<p><a href=\"https:\/\/shrtco.de\/\" target=\"_blank\" rel=\"noopener\">Shrtcode<\/a> is a URL shorterner that offers free use of its shortening services. It puts special emphasis on security, constantly checking that shortened are always pointing to the original site and are free of malware and virus. Shrtcode also offers custom URL generation, QR code generators, password-protected links, and more. However, only the URL shortening features are documented in its docs. To get access to all other features it needs to be requested via email using <a href=\"mailto:info@tibush.com\"><strong>info@tibush.com<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to build a URL shortener with Shrtcode<\/h2>\n\n\n\n<p>The URL shortener we will build will have an input field to enter the original, long URL and a section to view the shortened URL. It will also include functionality to copy the shortened URL to the clipboard, which will be added using <a href=\"https:\/\/www.npmjs.com\/package\/react-copy-to-clipboard\" target=\"_blank\" rel=\"noopener\">react-copy-to-clipboard<\/a>. Let\u2019s get started:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set up React<\/h3>\n\n\n\n<p>Spin up a React sandbox on <a href=\"https:\/\/app.coderpad.io\/sandbox\">CoderPad<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-1024x651.png\" alt=\"\" class=\"wp-image-23149\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-1024x651.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-300x191.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-768x488.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-1536x977.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-11.21.00.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">CoderPad sandbox language environment <\/figcaption><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\ud83d\udca1 CoderPad sandboxes gives you the native code editor experience when building applications and conducting interviews.<\/p>\n<\/blockquote>\n\n\n\n<p>In the newly created sandbox, replace the content in <code>App.tsx<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;url, setUrl] = useState()\n  <span class=\"hljs-keyword\">const<\/span> &#91;shortendUrl, setShortenedUrl] = useState(<span class=\"hljs-string\">''<\/span>)\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'shortener'<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>URL shortener<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        {\/* form to enter URL to be shortened *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">'Enter URL'<\/span>\n            <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{url}<\/span>\n            <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setUrl(e.target.value)}\/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n        {\/* Section to view shortened URLS *\/}\n        {shortendUrl &amp;&amp;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'shortener__viewShot'<\/span>&gt;<\/span>\n            {shortendUrl}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        }\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code block above, we created a <code>url<\/code> used to make the input field controlled and a <code>shortendUrl<\/code> state which will hold the shortened URL.<\/p>\n\n\n\n<p>Next, modify <code>App.css<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">* {\n  <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: fit-content;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> <span class=\"hljs-selector-tag\">input<\/span>, <span class=\"hljs-selector-tag\">button<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span>;\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> <span class=\"hljs-selector-tag\">input<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid gray;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">66<\/span>);\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> <span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">95<\/span>, <span class=\"hljs-number\">180<\/span>, <span class=\"hljs-number\">245<\/span>);\n  <span class=\"hljs-attribute\">outline<\/span>: none;\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> <span class=\"hljs-selector-tag\">form<\/span> &gt; <span class=\"hljs-selector-tag\">button<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">95<\/span>, <span class=\"hljs-number\">180<\/span>, <span class=\"hljs-number\">245<\/span>);\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n<span class=\"hljs-selector-class\">.shortener<\/span> <span class=\"hljs-selector-tag\">form<\/span> &gt; <span class=\"hljs-selector-tag\">button<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">51<\/span>, <span class=\"hljs-number\">162<\/span>, <span class=\"hljs-number\">246<\/span>);\n}\n<span class=\"hljs-selector-class\">.shortener__viewShot<\/span> {\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">20px<\/span>;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid gainsboro;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n  <span class=\"hljs-attribute\">padding-left<\/span>: <span class=\"hljs-number\">10px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">66<\/span>);\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n}\n<span class=\"hljs-selector-class\">.shortener__viewShot<\/span> <span class=\"hljs-selector-tag\">button<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: transparent;\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-attribute\">color<\/span>: gray;\n}\n<span class=\"hljs-selector-class\">.shortener__viewShot<\/span> <span class=\"hljs-selector-tag\">button<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">64<\/span>, <span class=\"hljs-number\">66<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The sandbox builds the changes and the URL shortener application can be viewed in the preview panel:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_636a3d504be5d.png\" alt=\"\" title=\"URL shortener UI\"\/><figcaption class=\"wp-element-caption\">The URL shortener application with an input box.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How to shorten URLs with Shrtcode<\/h3>\n\n\n\n<p>To shorten URLs with Shrtcode, we just need to pass the URL as a query to the API endpoint as described in their <a href=\"https:\/\/shrtco.de\/docs\" target=\"_blank\" rel=\"noopener\">docs<\/a>.&nbsp;Head over to the <code>App.tsx<\/code> and add the following function after the <code>shortendUrl<\/code> state in the <code>App<\/code> component:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> shortenUrl = <span class=\"hljs-keyword\">async<\/span> (e) =&gt; {\n    e.preventDefault();\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n        <span class=\"hljs-string\">`https:\/\/api.shrtco.de\/v2\/shorten?url=<span class=\"hljs-subst\">${url}<\/span>`<\/span>\n      )\n      <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json()\n      setShortenedUrl(data.result.full_short_link);\n    } <span class=\"hljs-keyword\">catch<\/span> (e) {\n      alert(e);\n    }\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the above function we have attached the original URL as a query to Shrtcode\u2019s shortening endpoint and send a <strong>GET<\/strong> request to that endpoint. Then when the response returns, it gets stored in the <code>shortendUrl<\/code> state variable.<\/p>\n\n\n\n<p>Next, we need to call this function when the <strong>Submit<\/strong> button is clicked. For this, modify the opening form tag in the <code>App<\/code> component to the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{shortenUrl}<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With this, in our app, when we enter a URL in the input and click the <strong>Submit <\/strong>button, we will see the result like the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_636a3d51993e0.png\" alt=\"\" title=\"Shortened URL\"\/><figcaption class=\"wp-element-caption\">The URL <code>https:\/\/www.npmjs.com\/pack<\/code> shortened using Shrtcode&#8217;s API is returned beneath the input box.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Copy shortened URL to the clipboard<\/h3>\n\n\n\n<p>Now let\u2019s make it so that we can copy the shortened URL to the clipboard when we click the copy button. For this, we will be using <a href=\"https:\/\/www.npmjs.com\/package\/react-copy-to-clipboard\" target=\"_blank\" rel=\"noopener\">react-copy-to-clipboard<\/a>. In the shell console in the sandbox, install the library:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm i react-copy-to-clipboard<\/code><\/span><\/pre>\n\n\n<p>Next, we need to pass the button to trigger the copying feature as a child to the <code>CopyToClipboard<\/code> component and pass the short URL to be copied as props to it. <\/p>\n\n\n\n<p>To do this, import the <code>CopyToClipboard<\/code> component from then<code>react-copy-to-clipboard<\/code> library and modify the div with the class name of <code>shortener__viewShot<\/code> to the following version:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">import {CopyToClipboard} from 'react-copy-to-clipboard';\n\n...\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"shortener__viewShot\"<\/span>&gt;<\/span>\n  {shortendUrl}\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CopyToClipboard<\/span> <span class=\"hljs-attr\">text<\/span>=<span class=\"hljs-string\">{shortendUrl}<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> alert(\"The URL has been copied\")}&gt;copy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CopyToClipboard<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now when the <strong>copy<\/strong> button is clicked in our app, the short URL will be copied to the clipboard and the app will display an alert saying so.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-1024x651.png\" alt=\"\" class=\"wp-image-23316\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-1024x651.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-300x191.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-768x488.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-1536x977.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-08-at-18.07.28.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The alert box confirms that the shortened URL has been copied into the clipboard.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Try it out in the CoderPad sandbox<\/h2>\n\n\n\n<p>Now you should know how to add a URL shortener to your app with Shrtcode. This should come in handy whether you are building a social media app that automatically shortens links in posts just as LinkedIn does, a verification system where a link is also attached to the email as an alternative to the verification button or any other app where shorter links are preferred.<\/p>\n\n\n\n<p>Shorten your URLs in the sandbox below:<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=234367&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p><em>Taminoturoko Briggs is an enthusiastic software developer and technical writer. Core languages include JavaScript and Python.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>URLs tends to get lengthy, especially when parameters and query strings are attached. This can get annoying when you want to share a link.\u00a0Learn how you can build a URL shortener in React to reduce the length of your links.<\/p>\n","protected":false},"author":1,"featured_media":23276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[61],"keyword-cluster":[],"class_list":["post-23120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/23120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=23120"}],"version-history":[{"count":119,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/23120\/revisions"}],"predecessor-version":[{"id":32635,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/23120\/revisions\/32635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/23276"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=23120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=23120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=23120"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=23120"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=23120"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=23120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}