Ratio of the background image's dimensions Position of overlay relative to the top-left corner The overlay image can be customized with the following additional query parameters: Name The style= query parameter can also be an image URL to overlay on the default background image. Some memes come in multiple forms, which can be selected using the style= query parameter.įor example, the template provides these styles: /images/ds.png The list of predefined meme templates is available here: Alternate Styles
images/iw/animates_text/in_production.webp images/iw/animates_text/in_production.gif webp extensions can be used if an animated background is available or to animate text on static backgrounds: Format For example, produces:Ĭlients can request. The API is stateless so URLs contain all the information necessary to generate meme images. We can break this task down into smaller parts.įirstly, we set the form's onSubmit to equal the name of our new method, which we will call handleSubmit().An API to programmatically generate memes based solely on requested URLs.īuy me a coffee to help keep this service running! The property on the chosen image in the array is. Now, we need to create a method which displays a meme image which it randomly chooses from our allMemeImgs array when the Gen button is clicked. Displaying a random meme image alongside the Top and Bottom text As state is being correctly set on every keystroke, the text displayed on the image changes each time we type.ġ0. We can now test the app by typing into the text boxes. All of this is wrapped in a div and styled with the pre-provided meme class. We then add two tags which display the corresponding text which is also saved in state. Like in the Header component, we render a simple to start with. MemeGenerator needs a constructor() which calls super() and as it will be holding state, we add some empty state to it now.
We still need to import React, and since it is going to be a class component, we'll import Component as well (which is a named import). As the MemeGenerator component will be holding data and making calls to an API, it needs to be a class component. Next, we create the MemeGenerator.js file. After creating it, we then export Header. For now, the component should return a simple. Since Header is a component which is only used to display, it should be a functional component. Let's start by creating the Header.js file. The Header will only display elements, while MemeGenerator will call to the API and retain the data in state. Next up, we create the Header and MemeGenerator components. Creating the Header and MemeGenerator components The allows us to check that the app is displaying correctly to the screen. In it, we create a functional component called App which, for now, returns a simple. ReactDOM.render(, document.getElementById('root')) We also import App from its file "./App", which we will create shortly. We then put the App component at the 'root'. To do this, we import React and ReactDOM and use ReactDOM to render a component called App, which we will create later.
#RANDOM MEME GENERATOR API CODE#
The first thing we need to do is to create the boilerplate code for the app. Creating the boilerplate and rendering an App component Also, this tutorial doesn't use Hooks, but in my upcoming course we'll cover Hooks in depth and get tons of practice using them. Note: You should already be fairly familiar with some of the fundamental concepts of React, like components, state, props, and lifecycle methods.
If you ever get confused, you can also follow these steps in the Scrimba course, starting at this lecture.Īnd then if you like my teaching style and are in the mood for a tougher challenge after you complete this tutorial, please check out my upcoming advanced course on Scrimba. So in this article, I'll give you a step-by-step guide to creating the app. The app works by pulling a random meme image from an API and placing your text over the top of it to create your very own, personalized meme.
#RANDOM MEME GENERATOR API FREE#
So it's no coincidence that I picked a meme generator app as the capstone project in my free React course on Scrimba. Memes are great - they're such a fun way of describing ideas and opinions.
0 kommentar(er)
