1 of 7

@atomico/magic-form

Improves the form development experience thanks to the use of webcomponents to centralize submission

A powerful form submission manager created with Atomicojs webcomponents, with MagicForm you can:

Simplify the sending of forms by centralizing the sending actions through a provider.
Know at all times the forms that are being provided and show their status.
Isolate a group of actions according to provider, this means that if a provider does not register the action it will bubble to the parent provider.

Installation and import

npm install @atomico/magic-form

import { 
    MagicForm,
    MagicFormProvider 
} from "@atomico/magic-form";

import { 
    useMagicForm, 
    useMagicFormProvider 
} from "@atomico/magic-form/hooks";

Usage

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  document.querySelector("magic-form-provider").actions = {
    async add(form) {
      return fetch("./my-api", {
        method: "post",
        body: new FormData(form),
      }).then((res) => res.json());
    },
  };
</script>

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

magic-form-provider captures all the forms nested in magic-form when executing the submit event by the form and distributes them according to the definition of the action attribute to each method of the actions object

API

MagicFormProvider | <magic-form-provider>

receives the submits from MagicForm

Example

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

Events

Properties

MagicForm | <magic-form>

captures the submit event of the nested form and sends it to MagicFormProvider

Examples

<MagicForm>
  <form action="user">
    <input type="text" name="name" />
    <input type="text" name="email" />
    <button>Create user</button>
  </form>
</MagicForm>

<MagicForm onChangeState={event=>{
  console.log(event.currentTarget.state);
}}>
  <form action="user">
    <input type="text" name="name" />
    <input type="text" name="email" />
    <button>Create user</button>
  </form>
</MagicForm>

Events

Type

Description

Config

Properties

Property

Description

Type

Property.state

interface MagicFormActionStatus{
    result?:any,
    timestamp?: number,
    status: "pending" | "fulfilled" | "rejected"
}

MagicForm Hooks

useMagicForm

catch the submit event and send it to the useMagicFormProvider

useMagicFormProvider

receives the submits from useMagicForm

MagicForm in React and Preact

MagicForm api is equivalent in Atomicojs, React and Preact at JSX level

Installation

npm i @atomico/magic-form @atomico/react

Usage

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/react";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/preact";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

MagicForm in Microfrontend

MagicForm will help you manage your applications with microfrontend architecture, through the concept of isolated providers, for example:

<MagicFormProvider actions={{
    async login(){...}
}}>
    <MagicFormProvider actions={actionsClient}>
        <PageClient/>
    </MagicFormProvider>
    <MagicFormProvider actions={actionsAdmin}>
        <PageAdmin/>
    </MagicFormProvider>
</MagicFormProvider>

Any action not registered by the provider will continue to bubble until the next provider.

MagicForm Patterns

MagicForm makes it easy to send data to the server, here are some useful patterns

Create data

Search

The following action allows us to generate searches from a form tag that has an input search, the objective is to consume the search value recursively only if there has been a change in the input search during the fetch performed.

@atomico/magic-form

Improves the form development experience thanks to the use of webcomponents to centralize submission

A powerful form submission manager created with Atomicojs webcomponents, with MagicForm you can:

Simplify the sending of forms by centralizing the sending actions through a provider.
Know at all times the forms that are being provided and show their status.
Isolate a group of actions according to provider, this means that if a provider does not register the action it will bubble to the parent provider.

Installation and import

npm install @atomico/magic-form

import { 
    MagicForm,
    MagicFormProvider 
} from "@atomico/magic-form";

import { 
    useMagicForm, 
    useMagicFormProvider 
} from "@atomico/magic-form/hooks";

Usage

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  document.querySelector("magic-form-provider").actions = {
    async add(form) {
      return fetch("./my-api", {
        method: "post",
        body: new FormData(form),
      }).then((res) => res.json());
    },
  };
</script>

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

API

MagicFormProvider | <magic-form-provider>

MagicForm | <magic-form>

MagicForm Hooks

MagicForm in React and Preact

@atomico/magic-form

Installation and import

Usage

API

MagicFormProvider | <magic-form-provider>

Example

Events

Properties

MagicForm | <magic-form>

Examples

Events

Properties

Property.state

MagicForm Hooks

useMagicForm

useMagicFormProvider

MagicForm in React and Preact

Installation

Usage

MagicForm in Microfrontend

MagicForm Patterns

Login

Create data

Search

MagicForm in Microfrontend

MagicForm in React and Preact

Installation

Usage

MagicFormProvider | <magic-form-provider>

Example

Events

Properties

MagicForm | <magic-form>

Examples

Events

Properties

Property.state

@atomico/magic-form

Installation and import

Usage

API

MagicForm Patterns

Login

Create data

Search

MagicForm Hooks

useMagicForm

useMagicFormProvider