The Meme Fighter Meme Maker
Drop-in meme creation for web apps.
Getting Started
With Your Favorite Framework
Basic Example
npm i @memefighter/maker-core
import { start } from "@memefigher/maker-core";
function handler(memeImgUrl: string) {
// Do something with the meme created by the user
}
function makeAMeme() {
// Create an iframe element and retrieve a reference
const iframe = document.querySelector("iframe");
// Customize the appearance
const styleVariables = {
"--background-color": "#121212",
};
// Start the meme creation flow and pass the result to our handler
start({
iframe,
styleVariables,
}).then(handler);
}
iframe {
aspect-ratio: 1;
max-width: 100%;
width: auto;
height: auto;
}
Interface
The meme maker provides a basic level of aesthetic customization, and returns a url string pointing to the meme created by the user, which you can use in your app as you please.
function start ({
/** Reference to the iframe which will house the meme maker. */
iframe: HTMLIFrameElement;
/** Customize the appearance of the meme maker. */
styleVariables?: {
/** Background color for the meme maker iframe. */
"--background-color"?: string;
/** Text color for the meme maker iframe. */
"--foreground-color"?: string;
/** Button color for the meme maker iframe. */
"--button-color"?: string;
};
}): string;