open-index/open-npm huggingface dataset:
npm package: @getmagicform/react
Description: React wrapper for MagicForm embeddable forms
Latest version: 0.2.1

# @getmagicform/react

React wrapper for [MagicForm](https://getmagicform.com) embeddable forms.

## Installation

```bash
npm install @getmagicform/react
```

## Usage

```tsx
import { MagicForm } from "@getmagicform/react";

export default function Page() {
  return <MagicForm formId="YOUR_FORM_ID" />;
}
```

### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `formId` | `string` | Yes | Your form's embed code |
| `prefill` | `Record<string, any>` | No | Pre-fill values keyed by field ID |
| `locale` | `string` | No | Force a specific language (e.g. `"es"`, `"nl"`) |
| `onSubmit` | `(event) => void` | No | Called after successful submission |
| `onError` | `(event) => void` | No | Called on submission failure |
| `scriptUrl` | `string` | No | Override the default CDN URL |
| `className` | `string` | No | CSS class for the container div |
| `style` | `CSSProperties` | No | Inline styles for the container div |

### Pre-filling fields

```tsx
<MagicForm
  formId="YOUR_FORM_ID"
  prefill={{
    id_abc123: "john@example.com",
    id_def456: "Acme Inc",
  }}
/>
```

### Locale

By default, the form detects the visitor's language from the page's `<html lang="...">` attribute. To force a specific language, use the `locale` prop. The language must be enabled on the form — otherwise it falls back to the default.

```tsx
<MagicForm formId="YOUR_FORM_ID" locale="es" />
```

### Callbacks

```tsx
<MagicForm
  formId="YOUR_FORM_ID"
  onSubmit={({ formId, values, submissionId }) => {
    console.log("Submitted:", values);
  }}
  onError={({ formId, error }) => {
    console.error("Error:", error);
  }}
/>
```

### Next.js

Works in Next.js App Router. The component includes `'use client'` automatically.

```tsx
// app/contact/page.tsx
import { MagicForm } from "@getmagicform/react";

export default function ContactPage() {
  return (
    <div className="max-w-lg mx-auto">
      <MagicForm formId="YOUR_FORM_ID" />
    </div>
  );
}
```

## Notes

- `className` and `style` apply to the container div only
- Form styling is controlled via the MagicForm builder
- Multiple forms on a single page are supported
- React 18+ and React 19 compatible

## License

MIT
npm package: @getmagicink/client-react
Description: AI powered content generation and conversion optimization. MagicInk official React package.
Author: MagicInk
Latest version: 1.0.3

# MagicInk

## What is MagicInk?

[MagicInk](https://magicink.ai/get-started) is an AI-powered, data-driven content generation and optimization platform. Your website boils down to the content that you show your users and the actions you want them to take. MagicInk generates and optimizes your content for the actions your users are taking. Test thousands of automatically generated instances of your copy, and watch as MagicInk selects and iterates on the language that resonates most with your users.

## What is this package?

In MagicInk, you create "Inks" for your website. The MagicInk React Client will initialize MagicInk automatically, and includes a clean interface for accessing inks in your React app.

# Installation

## Package Installation

With npm

```
npm install --save @getmagicink/client-react
```

or, with Yarn

```
yarn add @getmagicink/client-react
```

## MagicInk Setup

1. Create a [MagicInk account](https://magicink.ai/get-started) if you don't already have one. Follow the quick start. Don't worry about pasting any script tags onto your site, this will be taken care of by the MagicInk provider. Take note of your client token (the value shown in `initMagic`).
1. [Create an ink](https://magicink.ai/app/dashboard/generators) (if you don't already have one). Take note of your ink ID (the value shown in `magic`).

# Usage

First, wrap your app in a `MagicProvider`. You should only have one of these.

```
import { MagicProvider } from "@getmagicink/client-react";

// ...

return (
    <MagicProvider clientToken={YOUR_CLIENT_TOKEN}>
        {/* The rest of your app... */}
    </MagicProvider>
);
```

Then, within the provider, use the `Magic` component to show your inks. For example:

```
import { Magic } from "@getmagicink/client-react";

// ...

return (
    <div>
        <h1>
            <Magic generatorId={HEADING_INK_ID} fallback="My Webpage" />
        </h1>
        <div>
            <Magic generatorId={CONTENT_INK_ID} loading={
                <div>Loading...</div>
            } />
        </div>
    </div>
);
```