Developers
Start building
Themes/Theme SDK/Modules/forms/Hooks

Hooks

The hooks of @poltura/theme-sdk/forms.

On this page
import { … } from '@poltura/theme-sdk/forms';

useStoreForm

The surrounding form's state and actions, for your own fields and buttons inside StoreForm.

useStoreForm(): StoreFormState

Throws outside a StoreForm.

Returns: The form, its values and errors, and the actions that fill it in and send it.

Example

import { FormField, StoreForm, useStoreForm } from '@poltura/theme-sdk/forms';

function Fields() {
  const form = useStoreForm();
  return (
    <>
      {form.fields.map((field) => (
        <FormField key={field.id} id={field.id} />
      ))}
      <button type="submit" disabled={form.submitting}>
        {form.submitting ? form.texts.submitting : form.texts.submit}
      </button>
    </>
  );
}

export function Enquiry() {
  return (
    <StoreForm handle="contact">
      <Fields />
    </StoreForm>
  );
}

useStoreFormField

One field of the surrounding form, for a control of your own.

useStoreFormField(id: string): StoreFormFieldState

Parameters

  • id: string: The field id.

Returns: The field, its value and error, and the setter.

Example

import { useStoreFormField } from '@poltura/theme-sdk/forms';

export function EmailInput() {
  const email = useStoreFormField('email');
  if (!email.visible) return null;
  return (
    <input
      type="email"
      aria-label={email.field?.label}
      value={typeof email.value === 'string' ? email.value : ''}
      onChange={(event) => email.setValue(event.target.value)}
    />
  );
}

useFormActions

The actions that open a merchant's form in a dialog or side panel.

useFormActions(): FormActions

Returns: openForm and preloadForm.

Example

import { useFormActions } from '@poltura/theme-sdk/forms';

export function SizeHelpLink() {
  const { openForm } = useFormActions();
  return (
    <button type="button" onClick={(event) => openForm({ handle: 'size-help', display: 'drawer' }, event.currentTarget)}>
      Ask about sizes
    </button>
  );
}

useNewsletter

The store's newsletter: whether it takes sign-ups and the wording to ask with.

useNewsletter(): NewsletterState

Returns: The newsletter state.

Example

import { NewsletterTrigger, useNewsletter } from '@poltura/theme-sdk/forms';

export function SignUpTeaser() {
  const newsletter = useNewsletter();
  if (!newsletter.visible) return null;
  return (
    <aside>
      <h2>{newsletter.texts.heading}</h2>
      <NewsletterTrigger>{newsletter.texts.button}</NewsletterTrigger>
    </aside>
  );
}
Last updated