open-index/open-npm huggingface dataset:
npm package: @memefighter/maker-core
Description: Provides coordination between iframe and parent for configuration and generation of memes.
Latest version: 0.0.18

# The Meme Fighter Meme Maker

Drop-in meme creation for web apps.

![meme maker](https://xw6bn-wyaaa-aaaag-abtbq-cai.raw.icp0.io/gh-meme-maker-preview.gif)

## Getting Started

### With Your Favorite Framework

- [React Sandbox](https://codesandbox.io/s/meme-maker-core-react-lfxnfm)
- [Svelte Sandbox](https://codesandbox.io/s/meme-maker-core-svelte-dycl3t)

### Basic Example

`npm i @memefighter/maker-core`

```typescript
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);
}
```

_⚠️ We recommend using the following style rule on your iframe:_

```css
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.

```typescript
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;
```
npm package: @memefighter/maker-react
Description: Add meme creation to your react app with this drop-in solution for world-class meme generation.
Latest version: 0.0.13
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# The React Meme Fighter Meme Maker

Drop-in meme creation for react apps.

![meme maker](https://xw6bn-wyaaa-aaaag-abtbq-cai.raw.icp0.io/gh-meme-maker-preview.gif)

## Getting Started

This package provides drop-in react component for creating memes. For other frameworks, see (`[@memefighter/maker-core](https://www.npmjs.com/package/@memefighter/maker-core)`).

`npm i @memefighter/maker-react`

```typescript
import MemeMaker from "@memefighter/maker-react";

<MemeMaker
  /** Function which receives the meme as an image url when the user has finished creating it. */
  handler={handler}
  /** Customize the appearance of the meme maker. These are all the options currently available. */
  styleVariables={{
    "--background-color": "#111",
    "--foreground-color": "#fff",
    "--button-color": "#333",
  }}
  /** Declare the width of the embedded meme maker iframe. */
  width={400}
  /** Declare the height of the embedded meme maker iframe. */
  height={400}
/>;
```

[See a functioning example on code sandbox](https://codesandbox.io/s/meme-maker-km4tpv).
npm package: @memefighter/maker-svelte
Description: Add meme creation to your svelte app with this drop-in solution for world-class meme generation.
Latest version: 0.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# The Svelte Meme Fighter Meme Maker

Drop-in meme creation for svelte apps.

![meme maker](https://xw6bn-wyaaa-aaaag-abtbq-cai.raw.icp0.io/gh-meme-maker-preview.gif)

## Getting Started

This package provides drop-in react component for creating memes. For other frameworks, see (`[@memefighter/maker-core](https://www.npmjs.com/package/@memefighter/maker-core)`).

`npm i @memefighter/maker-svelte`

```svelte
<script lang="ts">
  import MemeMaker from "@memefighter/maker-svelte/index.svelte";

  /** Function which receives the meme as an image url when the user has finished creating it. */
  function handler (meme) {};

  /** Customize the appearance of the meme maker. These are all the options currently available. */
  const styleVariables = {
    "--foreground-color": "#fff",
    "--background-color": "#111",
    "--button-color": "#333"
  };

  /** Declare the width of the embedded meme maker iframe. */
  const width = 400;

  /** Declare the height of the embedded meme maker iframe. */
  const height = 400;
</script>

<main>
  <MemeMaker {handler} {styleVariables} {width} {height} />;
</main>
```

[See a functioning example on code sandbox](https://codesandbox.io/s/meme-maker-km4tpv).