matsuri-forms-sdk

• Installation
• How to use
  • useMatsuriForms
  • useSurveyForm
    • Basic Usage
    • Use dev forms
    • Custom success messages
    • Set defaultValues
    • Hidden specified questions

Installation

yarn add matsuri-forms-sdk matsuri-hooks

How to use

useMatsuriForms

useMatsuriFormsは、matsuri-formsを利用したフォームを扱いやすくするためのものです。 これはHeadlessなため、見た目は自分で作るか、matsuri-forms-sdk/matsuri-uiを利用する必要があります。

import { useMatsuriForms, MatsuriFormsQuestionProvider, MatsuriFormsQuestion } from "matsuri-forms-sdk"
import { SelectQuestion, MultipleTextQuestion, TextQuestion } from "matsuri-forms-sdk/matsuri-ui"
import { Button, useAlert } from "matsuri-ui"
const Form = ({ formId }:{ formId: string }) => {
  const { questions, submit, errors, validate, isSubmitting, title } = useMatsuriForms(
    formId
    {
      dev: process.env.NODE_ENV !== "production",
    },
  );
  const { throwAlert } = useAlert()

  return (
    <div
      css={css`
        display: grid;
        gap: 24px;
      `}
    >
      <header>
        <Typography variant="h2">
          {title}
        </Typography>
      </header>
      <form
        onSubmit={async (event) => {
          event.preventDefault();
          const { errors } = validate(event.currentTarget);
          if (errors) {
            return
          }

          const { error } = await submit(event.currentTarget);

          throwAlert(error, {
            errorMessage: {
              reason: "サーバー側のエラーの可能性があります。",
              action:
                "しばらく時間を空けて試すか、開発チームへお問い合わせください。",
              happend: "フィードバックの送信に失敗しました。",
            },
          });
        }}
      >
        <MatsuriFormsQuestionProvider
          renderSelect={SelectQuestion}
          renderMultilineText={MultipleTextQuestion}
          renderText={TextQuestion}
        >
          {questions.map((question) => {
            return (
              <MatsuriFormsQuestion
                error={errors[question.id]}
                {...question}
                key={question.id}
              />
            );
          })}
        </MatsuriFormsQuestionProvider>
        <Button
          variant="filled"
          disabled={isSubmitting}
          color="primary"
        >
          送信する
        </Button>
      </form>
    </div>
  );
};

useSurveyForm

useSurveyForm、matsuri-formsを利用してアンケート調査などを行うためのものです。 これはUIにmatsuri-uiを利用しています。 matsuri-uiを利用したコードは、すべてmatsuri-forms-sdk/matsuri-uiから利用します。

import {
  SurveyFormProvider,
  useSurveyForm,
} from "matsuri-forms-sdk/matsuri-ui";
import { Button } from "matsuri-ui";

const Page = () => {
  const survey = useSurveyForm({
    formId: "01J151HQRHBKXJPH5K4T435AMF",
  });

  return (
    <Button
      onClick={async () => {
        if (await survey()) {
          console.log("Happy day!");
        } else {
          console.log("Sad day!");
        }
      }}
    >
      Tap me!
    </Button>
  );
};

//
<SurveyFormProvider>
  <Page />
</SurveyFormProvider>;

Basic Usage

useSurveyFormとsurveyを同じ引数を取ります。 状況に合わせて、適した方を利用してください。useSurveyFormの引数はsurveyの引数で上書きされます。

const survey = useSurveyForm({ formId: "01J151HQRHBKXJPH5K4T435AMF" });

if (await survey()) {
  console.log("Happy day!");
} else {
  console.log("Sad day!");
}

const survey = useSurveyForm();

await survey({ formId: "01J151HQRHBKXJPH5K4T435AMF" });
await survey({ formId: "02J151HQRHBKXJPH5K4T435AMF" });

Use dev forms

開発環境のフォームを利用する場合は次のようにします。

const survey = useSurveyForm({
  formId: "01J151HQRHBKXJPH5K4T435AMF",
  dev: true,
});

const survey = useSurveyForm({ dev: true });
await survey({ formId: "01J151HQRHBKXJPH5K4T435AMF" });

Custom success messages

await survey({
  formId: "01J151HQRHBKXJPH5K4T435AMF",
  ignoreSuccessMessage: true,
});

await survey({
  formId: "01J151HQRHBKXJPH5K4T435AMF",
  successMessage: "Thanks!",
});

Set defaultValues

await survey({
  defaultValues: {
    "1904a18ddb112e": "John Doe",
    "01J151MW4QG3A91FHBF37RJ6CY": ["5"],
    "01J151K2RMKMVEB3ZPHXG7MXKB": "素晴らしいサービスです!",
  },
});

Hidden specified questions

await survey({
  hiddenQuestionIds: ["1904a18ddb112e"],
});