var d=Object.defineProperty,c=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var o=(e,n,s)=>n in e?d(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s,a=(e,n)=>{for(var s in n||(n={}))F.call(n,s)&&o(e,s,n[s]);if(t)for(var s of t(n))l.call(n,s)&&o(e,s,n[s]);return e},r=(e,n)=>c(e,m(n));var i=(e,n)=>{var s={};for(var p in e)F.call(e,p)&&n.indexOf(p)<0&&(s[p]=e[p]);if(e!=null&&t)for(var p of t(e))n.indexOf(p)<0&&l.call(e,p)&&(s[p]=e[p]);return s};const makeShortcode=e=>function(s){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",a({},s))},Callout=makeShortcode("Callout"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:e}=p,n=i(p,["components"]);return mdx(MDXLayout,r(a(a({},layoutProps),n),{components:e,mdxType:"MDXLayout"}),mdx("p",null,mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," lets you choose from thousands of public APIs that over 3 million developers are using. You can explore them on RapidAPI Hub and select the best one for your next project."),mdx("p",null,"Today, we will be building a web application that will allow users to get an automated screenshot of a given URL. APIs are available that offer fast screenshot generation, so let's build the app using one of them."),mdx("h2",a({},{id:"stack"}),mdx("a",a({parentName:"h2"},{href:"#stack"}),"Stack")),mdx("p",null,"The stack for our app is going to be as follows. I am going to use ",mdx("a",a({parentName:"p"},{href:"https://nextjs.org/"}),"Next.js")," for the client-side of our app and ",mdx("a",a({parentName:"p"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," for styling it."),mdx("p",null,"Even if you don\u2019t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process."),mdx("h2",a({},{id:"choosing-the-api"}),mdx("a",a({parentName:"h2"},{href:"#choosing-the-api"}),"Choosing The API")),mdx("p",null,"Let\u2019s find the API first. Go to ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," and ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/auth/sign-up?referral=/hub"}),"create an account"),' if you haven\u2019t already. Then, search for "Screenshot" in the search section.'),mdx(Callout,{title:"Deep dive",linkText:"Read more",linkHref:"https://rapidapi.com/learn/hub",mdxType:"Callout"},"Learn more about how to use RapidAPI Hub as a developer."),mdx("p",null,"You will see that we have a lot of APIs to choose from. For our app, I will use the ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/apishub/api/website-screenshot6/"}),"Website Screenshot API"),"."),mdx("p",null,"To use this API, you need to subscribe to it first. You can do this by clicking on the ",mdx("strong",{parentName:"p"},"Subscribe to Test")," button."),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-screenshot-app/images/subscribe.png",alt:"Subscribe to Website Screenshot API"})),mdx("p",null,"Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. We are going to subscribe to the free plan for this guide."),mdx("p",null,"Once subscribed, you will be back on the ",mdx("strong",{parentName:"p"},"Endpoints")," page. In the central section, you should see a field named ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key"),". Save its value. We will need it later to call the API."),mdx("h2",a({},{id:"building-the-ui"}),mdx("a",a({parentName:"h2"},{href:"#building-the-ui"}),"Building The UI")),mdx("p",null,"We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npx create-next-app -e with-tailwindcss screenshot-app"))))),mdx("p",null,"It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name ",mdx("inlineCode",{parentName:"p"},"screenshot-app")," has been created. Open this folder in your preferred code editor."),mdx("h3",a({},{id:"project-files"}),mdx("a",a({parentName:"h3"},{href:"#project-files"}),"Project Files")),mdx("p",null,"In our project folder, we will have the following folders and files. I will briefly break them down for you:"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"pages")," directory: It has the ",mdx("inlineCode",{parentName:"li"},"index.js")," file, which is the entry point of our app, basically the home page. It also has",mdx("inlineCode",{parentName:"li"},"_app.js")," and another directory named ",mdx("inlineCode",{parentName:"li"},"api"),", where we will store the requests to our API."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"public")," directory: It holds assets. You can place your static files here to load later in the application."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package.json"),": This file contains the metadata of your project."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package-lock.json"),": This file is responsible for tracking the exact version of every installed package."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"postcss.config.js"),": This file contains ",mdx("a",a({parentName:"li"},{href:"https://github.com/postcss/postcss"}),"PostCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"tailwind.config.js"),": It contains ",mdx("a",a({parentName:"li"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"readme.md"),": It\u2019s a markdown file for documentation.")),mdx("p",null,"I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/blob/main/screenshot-app/tailwind.config.js"}),"this")," file, and copy all of its content, then paste it inside the ",mdx("inlineCode",{parentName:"p"},"tailwind.config.js")," file in your project. These are Tailwind configurations for the colors and fonts I will be using."),mdx("p",null,"Our initial UI should look like this."),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-screenshot-app/images/preview.png",alt:"Initial UI of our App"})),mdx("p",null,"With all that set, it's time to code the app. Let's jump right into it."),mdx("h3",a({},{id:"-step-1"}),mdx("a",a({parentName:"h3"},{href:"#-step-1"}),"\u2192 STEP #1")),mdx("p",null,"Open the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file and remove all the existing code. Let's add the layout."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h1 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-6xl text-primary font-bold mt-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active text-2xl mt-6"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Get screenshot of any given URL.")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"I added the following to ",mdx("inlineCode",{parentName:"p"},"pages/_app.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," Head "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"next/head"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"tailwindcss/tailwind.css"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"MyApp"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Component"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," pageProps"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Head"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"title"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"RapidAPI Devrel Example - Screenshot App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"link "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"rel"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"icon"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"href"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"/favicon.ico"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"link")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"href"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800"),mdx("span",a({parentName:"div"},{style:{color:"#EC3A37F5"}}),"&"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"display=swap"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"rel"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"stylesheet"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Component "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"..."),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"pageProps"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," MyApp"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("h3",a({},{id:"-step-2"}),mdx("a",a({parentName:"h3"},{href:"#-step-2"}),"\u2192 STEP #2")),mdx("p",null,"As you can see in the UI preview, we require an input form to enter the URL of the target website. A search button will follow the input. Let's add these."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h1 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-6xl text-primary font-bold mt-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active text-2xl mt-6"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Get screenshot of any given URL.")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"form")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"sm:mx-auto mt-12 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Allow enter key to submit")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a url eg: https://RapidAPI.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-background font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Submit")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"This code will create the input fields and search button. I have also styled and made them responsive using ",mdx("a",a({parentName:"p"},{href:"(https://tailwindcss.com/)"}),"TailwindCSS"),"."),mdx("p",null,"Now, we need to store the user input in the input field. We can do it using React ",mdx("inlineCode",{parentName:"p"},"useState")," hook. We will use a couple of states for our app; let's add them. Check the comments to see the purpose of each state."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores User Input URL")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores Response from the API")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"loading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores the loading state to show loading indicator")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h1 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-6xl text-primary font-bold mt-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active text-2xl mt-6"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Get screenshot of any given URL.")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"form")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"sm:mx-auto mt-12 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a url eg: https://RapidAPI.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Store input URL")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Remove previous screenshot")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-background font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Submit")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"Notice how we are using the ",mdx("inlineCode",{parentName:"p"},"onChange")," handler on the input field to store their value in our ",mdx("inlineCode",{parentName:"p"},"url")," state."),mdx("h3",a({},{id:"-step-3"}),mdx("a",a({parentName:"h3"},{href:"#-step-3"}),"\u2192 STEP #3")),mdx("p",null,"Let\u2019s integrate the API now. For this, first, create a ",mdx("inlineCode",{parentName:"p"},".env.local")," file in the root directory of your project and paste the following into it:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY"))))),mdx("p",null,"Remember the ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key")," I asked you to save earlier? You need to replace ",mdx("inlineCode",{parentName:"p"},"YOUR-RAPIDAPI-KEY")," with its value. You get the key after subscribing to the ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/apishub/api/website-screenshot6/"}),"Website Screenshot API"),"."),mdx("p",null,"Now download and add ",mdx("inlineCode",{parentName:"p"},"axios")," to your project. For this, run the following command in the terminal:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npm install axios"))))),mdx("p",null,"And import ",mdx("inlineCode",{parentName:"p"},"axios")," in ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("p",null,"The API offers a single endpoint ",mdx("inlineCode",{parentName:"p"},"GET Screenshot")," to request the API. It takes the following parameters:"),mdx("ul",null,mdx("li",{parentName:"ul"},"URL ",mdx("em",{parentName:"li"},"Required")),mdx("li",{parentName:"ul"},"Width ",mdx("em",{parentName:"li"},"Required")),mdx("li",{parentName:"ul"},"Height ",mdx("em",{parentName:"li"},"Required")),mdx("li",{parentName:"ul"},"Fullscreen ",mdx("em",{parentName:"li"},"Optional"))),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-screenshot-app/images/snippet.png",alt:"API Endpoint and (JavaScript) Axios Snippet"})),mdx("p",null,"For easy integration, ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," automatically generates snippets in multiple languages and options. We will copy the ",mdx("inlineCode",{parentName:"p"},"(JavaScript) Axios")," ones, as you can see above."),mdx("p",null,"Let's set up the API calls now. In the ",mdx("inlineCode",{parentName:"p"},"pages/api")," directory, create a file named ",mdx("inlineCode",{parentName:"p"},"screenshot.js")," and use the code snippet as follows:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// In pages/api/screenshot.js")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"handler"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," options "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," method"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"GET"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://website-screenshot6.p.rapidapi.com/screenshot"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," params"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Parameters")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"query"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," width"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"1920"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," height"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"1080"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," fullscreen"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"},")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," headers"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-host"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"website-screenshot6.p.rapidapi.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-key"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," process"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"env"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"request"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"options"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"then"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"200"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"json"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"})")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"As you can see, we have specified all the parameters and for ",mdx("inlineCode",{parentName:"p"},"url")," we are using the dynamic ",mdx("inlineCode",{parentName:"p"},"req.query.url")," parameter. ",mdx("inlineCode",{parentName:"p"},"req.query")," is an object in Next.js that holds the input parameters coming from our client-side. We will pass the ",mdx("inlineCode",{parentName:"p"},"url")," state from our client-side to this API."),mdx("h3",a({},{id:"-step-4"}),mdx("a",a({parentName:"h3"},{href:"#-step-4"}),"\u2192 STEP #4")),mdx("p",null,"Now we need to create a function ",mdx("inlineCode",{parentName:"p"},"getScreenshot")," in the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file to send a request to our APIs. The search button will trigger this function, which will make a GET request to our API."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"loading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getScreenshot"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"try"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"get"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"api/screenshot/"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," params"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Pass the user input url to our API as a parameter")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Destructure data from the response")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"screenshotUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Store URL of screenshot received in API response")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h1 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-6xl text-primary font-bold mt-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active text-2xl mt-6"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Get screenshot of any given URL.")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"form")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"sm:mx-auto mt-12 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getScreenshot"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Trigger the API call on submit")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a url eg: https://RapidAPI.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-background font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Submit")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"Thanks to the ",mdx("inlineCode",{parentName:"p"},"onSubmit")," handler of the form, ",mdx("inlineCode",{parentName:"p"},"getScreenshot")," function will be triggered when the submit button is clicked or by pressing the enter key."),mdx("h3",a({},{id:"-final-step"}),mdx("a",a({parentName:"h3"},{href:"#-final-step"}),"\u2192 FINAL STEP")),mdx("p",null,"Finally, it is time to display the screenshot returned by the API. You can use the ",mdx("strong",{parentName:"p"},"Test Endpoint")," button on the API's page to check the response."),mdx("p",null,"The API returns a URL of the generated screenshot. We will use an ",mdx("inlineCode",{parentName:"p"},"img")," tag to display the screenshot on our page. Our final code looks like this:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"loading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getScreenshot"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"try"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"get"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"api/screenshot/"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," params"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"screenshotUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"false"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h1 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-6xl text-primary font-bold mt-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"App"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-active text-2xl mt-6"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Get screenshot of any given URL.")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"form")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"sm:mx-auto mt-12 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getScreenshot"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a url eg: https://RapidAPI.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-background font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"loading "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"?"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Loading.."),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Submit"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"&&"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-10 "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-xl font-bold text-active"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Screenshot")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"img")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"src"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"mt-3 w-full h-full rounded-lg"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"I alos implemented the loading state, which will show ",mdx("inlineCode",{parentName:"p"},"loading..")," in the button while our API Call is under process. Finally, our app is ready and looks like this:"),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-screenshot-app/images/final.png",alt:"Screenshot App built using Website Screenshot API"})),mdx("h2",a({},{id:"wrap-up"}),mdx("a",a({parentName:"h2"},{href:"#wrap-up"}),"Wrap Up")),mdx("p",null,"All done. You can also check the deployed ",mdx("a",a({parentName:"p"},{href:"https://rapidapi-example-screenshot-app.vercel.app/"}),"Screenshot App")," and find its code in the ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/tree/main/screenshot-app"}),"RapidAPI Examples Repository")," on GitHub."))}MDXContent.isMDXComponent=!0;

incremental-static-generation

Interactive Guide to ISR for Fetching APIs in Next.js

Next.js provides Incremental Static Regeneration (ISR) as a way of data fetching. Let's see how we can fetch data from APIs using ISR.