How to Create a Random Image Generator using Pixabay API and React

Are you tired of seeing the same old boring images on your website or app? Are you looking for a fun and easy way to generate random images for your project? Look no further than the Pixabay API and React! In this tutorial, we’ll walk you through the steps to create a simple random image generator using these powerful tools.

Prerequisites Before we get started, there are a few things you’ll need:

• Node.js and npm (Node.js package manager)
• A text editor, such as Visual Studio Code
• A web browser, such as Google Chrome

If you don’t already have these tools installed, you can download them using the links provided.

How to Create a Random Image Generator using Pixabay API and React

Step 1: Setting Up the Project

To get started, we’ll need to create a new React project. Open your terminal and navigate to the directory where you want to create your project. Then run the following command to create a new React project using the create-react-app tool:

arduinoCopy codenpx create-react-app random-image-generator

This will create a new directory called random-image-generator with all the files and folders you need for your React project. Navigate to the project directory by running the following command:

arduinoCopy codecd random-image-generator

Now, let’s install the Axios library which we will use to make HTTP requests to the Pixabay API:

Copy codenpm install axios

Step 2: Creating a Pixabay API Key

Before we can use the Pixabay API, we need to get an API key. Go to the Pixabay API page and sign up for a free API key. Once you’ve got your API key, keep it handy as we’ll need it later.

Step 3: Fetching Images from the Pixabay API

Now that we have our API key and required libraries, we can start getting images from the Pixabay API. In the src directory, create a new file called api.js which will contain the code to make HTTP requests to the Pixabay API.

In api.js, import the Axios library and create a new fetchRandomImage function that accepts a search query and returns a random image from the Pixabay API.

javascriptCopy codeimport axios from 'axios';

const API_KEY = 'YOUR_API_KEY_HERE'; // Replace with your own API key

export async function fetchRandomImage(searchTerm) {
  const response = await axios.get(
    `https://pixabay.com/api/?key=${API_KEY}&q=${searchTerm}&per_page=100`
  );
  const images = response.data.hits;

  if (images.length === 0) {
    throw new Error(`No images found for search term: ${searchTerm}`);
  }

  // Return a random image from the search results
  return images[Math.floor(Math.random() * images.length)];
}

Step 4: Creating the User Interface

To create the user interface for our image generator, we need to modify the App.js file. Follow the steps below:

1. Open the App.js file in the src directory of your React project.
2. Import the useState hook and the fetchRandomImage function from the api.js file.

javascriptCopy codeimport React, { useState } from 'react';
import { fetchRandomImage } from './api';

3. Create a functional component called App using the useState hook to define the state variables we will use to manage the user interface.

scssCopy codefunction App() {
  const [image, setImage] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

4. Create a function called handleSearch that will be called when the user submits the form to search for images. This function will make a request to the Pixabay API using the fetchRandomImage function and update the state variables accordingly.

scssCopy codeasync function handleSearch(e) {
  e.preventDefault();
  setIsLoading(true);
  setError(null);

  try {
    const image = await fetchRandomImage(searchTerm);
    setImage(image);
  } catch (error) {
    setError(error.message);
  } finally {
    setIsLoading(false);
  }
}

5. Render a form with an input field for the search term and a search button. When the user submits the form, the handleSearch function will be called.

javascriptCopy codereturn (
  <div className="App">
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button type="submit" disabled={isLoading}>
        Search
      </button>
    </form>
    {isLoading && <p>Loading...</p>}
    {error && <p>{error}</p>}
    {image && (
      <div>
        <h2>{image.tags}</h2>
        <img src={image.webformatURL} alt={image.tags} />
      </div>
    )}
  </div>
);

6. Finally, export the App component so it can be used in other parts of the application.

arduinoCopy codeexport default App;

Step 5: Testing the Image Generator

To test the image generator, follow the steps below:

1. Open your terminal and navigate to the root directory of your React project.
2. Run the following command to start the development server:

sqlCopy codenpm start

3. This will open a new browser window with the image generator. Enter a search term into the input field and click the Search button. A random image from the Pixabay API will be displayed.
4. Try searching for other terms to see a random image from the search results.

Conclusion

In this tutorial, we learned how to create a simple random image generator using the Pixabay API and React. We used the Axios library to make HTTP requests to the API and the ReactJS library to create the user interface.

I hope you found this tutorial helpful and that you were able to successfully create your own.