{"id":279,"date":"2021-05-24T12:54:37","date_gmt":"2021-05-24T12:54:37","guid":{"rendered":"http:\/\/doableyo.com\/yes\/?p=279"},"modified":"2021-05-24T12:57:34","modified_gmt":"2021-05-24T12:57:34","slug":"how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript","status":"publish","type":"post","link":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/","title":{"rendered":"How to add Buy me coffee script dynamically into React application or Javascript"},"content":{"rendered":"\n<p>Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow <a href=\"https:\/\/stackoverflow.com\/a\/34425083\/1575795\" target=\"_blank\" rel=\"noreferrer noopener\">here <\/a><\/p>\n\n\n\n<p>I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed in future, and all the code credit is to the author of stack overflow user) <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Update:\r\nNow that we have hooks, a better approach might be to use useEffect like so:\r\n\r\nuseEffect(() => {\r\n  const script = document.createElement('script');\r\n\r\n  script.src = \"https:\/\/use.typekit.net\/foobar.js\";\r\n  script.async = true;\r\n\r\n  document.body.appendChild(script);\r\n\r\n  return () => {\r\n    document.body.removeChild(script);\r\n  }\r\n}, &#91;]);\r\nWhich makes it a great candidate for a custom hook (eg: hooks\/useScript.js):\r\n\r\nimport { useEffect } from 'react';\r\n\r\nconst useScript = url => {\r\n  useEffect(() => {\r\n    const script = document.createElement('script');\r\n\r\n    script.src = url;\r\n    script.async = true;\r\n\r\n    document.body.appendChild(script);\r\n\r\n    return () => {\r\n      document.body.removeChild(script);\r\n    }\r\n  }, &#91;url]);\r\n};\r\n\r\nexport default useScript;\r\nWhich can be used like so:\r\n\r\nimport useScript from 'hooks\/useScript';\r\n\r\nconst MyComponent = props => {\r\n  useScript('https:\/\/use.typekit.net\/foobar.js');\r\n\r\n  \/\/ rest of your component\r\n}<\/code><\/pre>\n\n\n\n<p>Solution, I have added on top a &#8216;config&#8217; param to the useScript function for easy BMC Buy me coffee widget attributes to get added to script object dynamically: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const useScript = (url, config = null) => {\r\n\r\n  useEffect(() => {\r\n    const script = document.createElement(\"script\");\r\n\r\n    script.src = url;\r\n    script.async = true;\r\n\r\n    if (config &amp;&amp; Object.keys(config).length) {\r\n      for (let key in config) {\r\n        script.setAttribute(key, config&#91;key]);\r\n      }\r\n    }\r\n\r\n    \/\/ console.log(script);\r\n    document.body.appendChild(script);\r\n\r\n    return () => {\r\n      document.body.removeChild(script);\r\n    };\r\n  }, &#91;url]);\r\n};\r\n\r\nexport default useScript;<\/code><\/pre>\n\n\n\n<p>Boom!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow here I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8,14],"tags":[27,26,24,25],"class_list":["post-279","post","type-post","status-publish","format-standard","hentry","category-javascript","category-learning","category-tech","tag-buymecoffee","tag-hook","tag-react","tag-usescripthookreact","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!\" \/>\n<meta property=\"og:description\" content=\"Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow here I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"DoableYo!\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-24T12:54:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-24T12:57:34+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\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\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3\"},\"headline\":\"How to add Buy me coffee script dynamically into React application or Javascript\",\"datePublished\":\"2021-05-24T12:54:37+00:00\",\"dateModified\":\"2021-05-24T12:57:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\"},\"wordCount\":112,\"keywords\":[\"buymecoffee\",\"hook\",\"react\",\"usescripthookreact\"],\"articleSection\":[\"Javascript\",\"Learning\",\"Tech\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\",\"url\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\",\"name\":\"How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!\",\"isPartOf\":{\"@id\":\"https:\/\/doableyo.com\/yes\/#website\"},\"datePublished\":\"2021-05-24T12:54:37+00:00\",\"dateModified\":\"2021-05-24T12:57:34+00:00\",\"author\":{\"@id\":\"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3\"},\"breadcrumb\":{\"@id\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/doableyo.com\/yes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add Buy me coffee script dynamically into React application or Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/doableyo.com\/yes\/#website\",\"url\":\"https:\/\/doableyo.com\/yes\/\",\"name\":\"DoableYo!\",\"description\":\"Yo is the boost behind it!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/doableyo.com\/yes\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3\",\"name\":\"admin\",\"url\":\"http:\/\/doableyo.com\/yes\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!","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":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!","og_description":"Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow here I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed [&hellip;]","og_url":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/","og_site_name":"DoableYo!","article_published_time":"2021-05-24T12:54:37+00:00","article_modified_time":"2021-05-24T12:57:34+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#article","isPartOf":{"@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/"},"author":{"name":"admin","@id":"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3"},"headline":"How to add Buy me coffee script dynamically into React application or Javascript","datePublished":"2021-05-24T12:54:37+00:00","dateModified":"2021-05-24T12:57:34+00:00","mainEntityOfPage":{"@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/"},"wordCount":112,"keywords":["buymecoffee","hook","react","usescripthookreact"],"articleSection":["Javascript","Learning","Tech"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/","url":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/","name":"How to add Buy me coffee script dynamically into React application or Javascript - DoableYo!","isPartOf":{"@id":"https:\/\/doableyo.com\/yes\/#website"},"datePublished":"2021-05-24T12:54:37+00:00","dateModified":"2021-05-24T12:57:34+00:00","author":{"@id":"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3"},"breadcrumb":{"@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/doableyo.com\/yes\/how-to-add-buy-me-coffee-script-dynamically-into-react-application-or-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/doableyo.com\/yes\/"},{"@type":"ListItem","position":2,"name":"How to add Buy me coffee script dynamically into React application or Javascript"}]},{"@type":"WebSite","@id":"https:\/\/doableyo.com\/yes\/#website","url":"https:\/\/doableyo.com\/yes\/","name":"DoableYo!","description":"Yo is the boost behind it!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/doableyo.com\/yes\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/doableyo.com\/yes\/#\/schema\/person\/0b9be73850e0b7b2bda8b903e2ea07c3","name":"admin","url":"http:\/\/doableyo.com\/yes\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":3,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":282,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/posts\/279\/revisions\/282"}],"wp:attachment":[{"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/doableyo.com\/yes\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}