{"id":725,"date":"2021-08-25T13:22:16","date_gmt":"2021-08-25T12:22:16","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=725"},"modified":"2021-09-18T04:22:04","modified_gmt":"2021-09-18T03:22:04","slug":"react-js-show-and-hide-loading-animation-on-button-click","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/","title":{"rendered":"React JS: Show And Hide Loading Animation on Button Click"},"content":{"rendered":"\n

Let’s face it: We all hate to be kept waiting, especially when we don’t have control over the waiting process.<\/p>\n\n\n\n

When developing software applications, there’s a chance that users will face slow connection issues, time-consuming data fetching processes, or maybe a non-optimised code. <\/p>\n\n\n\n

Whatever the issue, you want to be able to give the user feedback on what’s going on so that the user, at the very least, understands that the waiting period is not in itself a bug. <\/p>\n\n\n\n

We can do that effectively in React<\/a> using loading animations.<\/p>\n\n\n\n

In this tutorial we shall be using Bootstrap’s spinner to show loading animation in react js.<\/p>\n\n\n\n

So, let’s get started.<\/p>\n\n\n\n

1. Create a React app <\/h2>\n\n\n\n

First, we want to create a new React app using the following command:<\/p>\n\n\n\n

npx create-react-app yourAppName<\/code><\/pre>\n\n\n\n
2. Run the application<\/h2>\n\n\n\n
Next, go to your app folder and run the following command<\/p>\n\n\n\n
yarn start<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
3. Add Bootstrap dependency<\/h2>\n\n\n\n
So we will add our bootstrap dependency so we can be able to use bootstrap components<\/p>\n\n\n\n
yarn add bootstrap\nyarn add react-bootstrap<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\"build<\/a><\/figure>\n\n\n\n
4. Let the coding begin<\/h2>\n\n\n\n
Now, let us modify our App.js file as follows, and we shall be using class components<\/p>\n\n\n\n
<\/p>\n\n\n\n
import React, { Component } from \"react\"; \nimport 'bootstrap\/dist\/css\/bootstrap.min.css';\nimport { Spinner, Button } from 'react-bootstrap';\n\nclass App extends Component {\nrender(){\nreturn(\n<div class=\"container\">\n <div className=\"btnContainer\">\n       <Button variant=\"success\">Show Loader<\/Button>\n       <Button variant=\"primary\">Hide Loader<\/Button>\n       <\/div>\n<\/div>\n)\n}\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Here, we created a button that will both show and hide the loading animation respectively, depending on the state of our application.<\/p>\n\n\n\n
Let’s add a bit of basic styling in our App.css file, shall we?<\/p>\n\n\n\n
.btnContainer {\n   display: flex;\n   flex-direction: row;\n   justify-content: space-evenly;\n   align-items: center;\n   position: relative;\n   top: 40vh;\n }<\/code><\/pre>\n\n\n\n
See what we have now:<\/h3>\n\n\n\n\n\n
Next, we will set our state in the constructor method and we will set our initial loading state to false.<\/p>\n\n\n\n
constructor(props){\n    super(props);\n    this.state = {\n      loading: false\n    }\n  }<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Also, we need to create a function. This function handle the process of showing and hiding our spinner element.<\/p>\n\n\n\n
   toggleLoader = () => {\n     if(!this.state.loading){\n       this.setState({loading: true})\n     }else{\n       this.setState({loading: false})\n     }\n  }\n<\/code><\/pre>\n\n\n\n
Let’s explain what’s going on in the above code …<\/p>\n\n\n\n
Here, we have an arrow function<\/a> where we are checking the state of the application. If the application is in a loading state, we want to show the animation and if not, we want to hide the animation. That’s what we’re effectively doing.<\/p>\n\n\n\n
So, we would put the following code in our render() method<\/p>\n\n\n\n
render(){\n  return (\n    <div>\n       \n      <div className=\"btnContainer\">\n       \n    {this.state.loading ?  <Spinner style={{marginBottom:27}} animation=\"border\"            variant=\"danger\" \/> : null }\n<\/div>\n<\/div>\n)\n}<\/code><\/pre>\n\n\n\n
So, here we have our spinner from bootstrap and we’re using the ternary operator to check whether or not the Spinner is loading, and that is great. But …<\/p>\n\n\n\n
What About Our Button Text?<\/h3>\n\n\n\n
Now, here’s the thing: if our spinner is not loading, we want the text to read “Show Loader” and if it is loading, we want the text to read “Hide Loader”. So, we add the following code:<\/p>\n\n\n\n
<Button onClick={() => this.toggleLoader()} variant={'primary'} size=\"lg\">{this.state.loading? 'Hide Loader': 'Show Loader'}<\/Button> <\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Here’s the code for the full application:<\/h3>\n\n\n\n
import React, { Component } from \"react\";\nimport \"bootstrap\/dist\/css\/bootstrap.min.css\";\nimport { Spinner, Button } from \"react-bootstrap\";\nimport \".\/App.css\";\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      loading: false,\n    };\n  }\n\n  toggleLoader = () => {\n    if (!this.state.loading) {\n      this.setState({ loading: true });\n    } else {\n      this.setState({ loading: false });\n    }\n  };\n\n  render() {\n    return (\n      <div>\n        <div className=\"btnContainer\">\n          {this.state.loading ? (\n            <Spinner\n              style={{ marginBottom: 27 }}\n              animation=\"border\"\n              variant=\"danger\"\n            \/>\n          ) : null}\n\n          <Button\n            onClick={() => this.toggleLoader()}\n            variant={\"primary\"}\n            size=\"lg\"\n          >\n            {this.state.loading ? \"Hide Loader\" : \"Show Loader\"}\n          <\/Button>\n        <\/div>\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Congrats!<\/h2>\n\n\n\n
\"\"
React JS Bootstrap Spinner Animation<\/figcaption><\/figure>\n\n\n\n
Kick-start your mobile app development project with pre-built mobile app templates<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Let’s face it: We all hate to be kept waiting, especially when we don’t have control over the<\/p>\n","protected":false},"author":1,"featured_media":731,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[73,98],"tags":[106,99],"class_list":["post-725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","category-softare-development","tag-react-js","tag-software-development"],"yoast_head":"\nReact JS: Show And Hide Loading Animation on Button Click<\/title>\n<meta name=\"description\" content=\"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React JS: Show And Hide Loading Animation on Button Click\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-25T12:22:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-18T03:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png\" \/>\n\t<meta property=\"og:image:width\" content=\"929\" \/>\n\t<meta property=\"og:image:height\" content=\"586\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"React JS: Show And Hide Loading Animation on Button Click\",\"datePublished\":\"2021-08-25T12:22:16+00:00\",\"dateModified\":\"2021-09-18T03:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/\"},\"wordCount\":427,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Screenshot-2021-08-24-at-13.11.29.png\",\"keywords\":[\"react.js\",\"software development\"],\"articleSection\":[\"react js\",\"softare development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/\",\"name\":\"React JS: Show And Hide Loading Animation on Button Click\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Screenshot-2021-08-24-at-13.11.29.png\",\"datePublished\":\"2021-08-25T12:22:16+00:00\",\"dateModified\":\"2021-09-18T03:22:04+00:00\",\"description\":\"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Screenshot-2021-08-24-at-13.11.29.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Screenshot-2021-08-24-at-13.11.29.png\",\"width\":929,\"height\":586,\"caption\":\"react js loading animation on button click\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js-show-and-hide-loading-animation-on-button-click\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"softare development\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/softare-development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React JS: Show And Hide Loading Animation on Button Click\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React JS: Show And Hide Loading Animation on Button Click","description":"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback","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:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/","og_locale":"en_US","og_type":"article","og_title":"React JS: Show And Hide Loading Animation on Button Click","og_description":"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback","og_url":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-08-25T12:22:16+00:00","article_modified_time":"2021-09-18T03:22:04+00:00","og_image":[{"width":929,"height":586,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"React JS: Show And Hide Loading Animation on Button Click","datePublished":"2021-08-25T12:22:16+00:00","dateModified":"2021-09-18T03:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/"},"wordCount":427,"commentCount":1,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","keywords":["react.js","software development"],"articleSection":["react js","softare development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/","url":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/","name":"React JS: Show And Hide Loading Animation on Button Click","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","datePublished":"2021-08-25T12:22:16+00:00","dateModified":"2021-09-18T03:22:04+00:00","description":"In this tutorial we shall be using Bootstrap's spinner to show loading animation in react js. A loading animation gives some form of feedback","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","width":929,"height":586,"caption":"react js loading animation on button click"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/react-js-show-and-hide-loading-animation-on-button-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"softare development","item":"https:\/\/codeflarelimited.com\/blog\/softare-development\/"},{"@type":"ListItem","position":3,"name":"React JS: Show And Hide Loading Animation on Button Click"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Screenshot-2021-08-24-at-13.11.29.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":4,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions\/770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/731"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}