# 9 - Meme Generator with Custom Text

### **Description**

Create a React application that generates memes with custom text.

### **Algorithm**

1. Initialize state variables to store the meme image, top text, and bottom text.
2. Render a form to input custom text and select a meme image.
3. Define a function to generate the meme with the custom text.
4. Render the generated meme.

### **Classes**

`MemeGenerator`: A React component that manages the meme state and generates the meme.

### **Code**

```javascript
import React, { useState } from 'react';

function MemeGenerator() {
  const [image, setImage] = useState('');
  const [topText, setTopText] = useState('');
  const [bottomText, setBottomText] = useState('');
  const [meme, setMeme] = useState('');

  const handleGenerateMeme = () => {
    const memeImage = new Image();
    memeImage.src = image;
    const canvas = document.createElement('canvas');
    canvas.width = memeImage.width;
    canvas.height = memeImage.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(memeImage, 0, 0);
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '30px Impact';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(topText, canvas.width / 2, canvas.height / 2 - 50);
    ctx.fillText(bottomText, canvas.width / 2, canvas.height / 2 + 50);
    setMeme(canvas.toDataURL());
  };

  return (
    <div>
      <form>
        <input value={image} onChange={(e) => setImage(e.target.value)} />
        <input value={topText} onChange={(e) => setTopText(e.target.value)} />
        <input value={bottomText} onChange={(e) => setBottomText(e.target.value)} />
        <button onClick={handleGenerateMeme}>Generate Meme</button>
      </form>
      <img src={meme} alt="Generated Meme" />
    </div>
  );
}

export default MemeGenerator;

```

### **Explanation**

The code defines a `MemeGenerator` component that utilizes the `useState` hook to initialize state variables for the meme image, top text, bottom text, and generated meme. The `handleGenerateMeme` function generates the meme by drawing the image and text on a canvas element. The component renders a form to input custom text and select a meme image, and a button to generate the meme. The generated meme is then rendered as an image.

### Possible Future Enhancements

* Add more meme image options.
* Implement a preview mode to display the generated meme in a separate container.
* Use a library like Konva to generate more complex memes.
* Integrate with a social media app to share generated memes.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/9-meme-generator-with-custom-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.