@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:

  1. Simplify the sending of forms by centralizing the sending actions through a provider.

  2. Know at all times the forms that are being provided and show their status.

  3. 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

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>

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

pageMagicFormProvider | <magic-form-provider>pageMagicForm | <magic-form>pageMagicForm HookspageMagicForm in React and Preact

Last updated