<!-- vscode-markdown-toc -->
- Installation
- How to use
- useMatsuriForms
- useSurveyForm
- Basic Usage
- Use dev forms
- Custom success messages
- Set defaultValues
- Hidden specified questions
- Language support
- Custom title
``bash`
yarn add matsuri-forms-sdk matsuri-hooks
useMatsuriFormsは、matsuri-formsを利用したフォームを扱いやすくするためのものです。
これはHeadlessなため、見た目は自分で作るか、matsuri-forms-sdk/matsuri-uiを利用する必要があります。
`tsx
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 (
display: grid;
gap: 24px;
}
>
{title}
event.preventDefault();
const { errors } = validate(event.currentTarget);
if (errors) {
return
}
const { error } = await submit(event.currentTarget);
throwAlert(error, {
errorMessage: {
reason: "サーバー側のエラーの可能性があります。",
action:
"しばらく時間を空けて試すか、開発チームへお問い合わせください。",
happend: "フィードバックの送信に失敗しました。",
},
});
}}
>
renderMultilineText={MultipleTextQuestion}
renderText={TextQuestion}
>
{questions.map((question) => {
return (
{...question}
key={question.id}
/>
);
})}
disabled={isSubmitting}
color="primary"
>
送信する
$3
useSurveyForm、matsuri-formsを利用してアンケート調査などを行うためのものです。
これはUIにmatsuri-uiを利用しています。
matsuri-uiを利用したコードは、すべてmatsuri-forms-sdk/matsuri-uiから利用します。
tsx
import {
SurveyFormProvider,
useSurveyForm,
} from "matsuri-forms-sdk/matsuri-ui";
import { Button } from "matsuri-ui";const Page = () => {
const survey = useSurveyForm({
formId: "01J151HQRHBKXJPH5K4T435AMF",
});
return (
if (await survey()) {
console.log("Happy day!");
} else {
console.log("Sad day!");
}
}}
>
Tap me!
);
};
//
`useSurveyFormとsurveyを同じ引数を取ります。
状況に合わせて、適した方を利用してください。useSurveyFormの引数はsurveyの引数で上書きされます。
tsx
const survey = useSurveyForm({ formId: "01J151HQRHBKXJPH5K4T435AMF" });if (await survey()) {
console.log("Happy day!");
} else {
console.log("Sad day!");
}
`tsx
const survey = useSurveyForm();await survey({ formId: "01J151HQRHBKXJPH5K4T435AMF" });
await survey({ formId: "02J151HQRHBKXJPH5K4T435AMF" });
`開発環境のフォームを利用する場合は次のようにします。
tsx
const survey = useSurveyForm({
formId: "01J151HQRHBKXJPH5K4T435AMF",
dev: true,
});
`tsx
const survey = useSurveyForm({ dev: true });
await survey({ formId: "01J151HQRHBKXJPH5K4T435AMF" });
`tsx
await survey({
formId: "01J151HQRHBKXJPH5K4T435AMF",
ignoreSuccessMessage: true,
});
`tsx
await survey({
formId: "01J151HQRHBKXJPH5K4T435AMF",
successMessage: "Thanks!",
});
`tsx
await survey({
defaultValues: {
"1904a18ddb112e": "John Doe",
"01J151MW4QG3A91FHBF37RJ6CY": ["5"],
"01J151K2RMKMVEB3ZPHXG7MXKB": "素晴らしいサービスです!",
},
});
`tsx
await survey({
hiddenQuestionIds: ["1904a18ddb112e"],
});
`フォームの言語を指定して、デフォルトのメッセージを指定された言語のものに差し替えることができます。
デフォルトは日本語（ja）です。
tsx
await survey({
formId: "01J151HQRHBKXJPH5K4T435AMF",
lang: "en", // "ja" | "en"
});
`tsx
const survey = useSurveyForm({
formId: "01J151HQRHBKXJPH5K4T435AMF",
lang: "en",
});
`フォームのタイトルをカスタマイズすることができます。
tsx
await survey({
formId: "01J151HQRHBKXJPH5K4T435AMF",
title: "カスタムタイトル",
});
`tsx
const survey = useSurveyForm({
formId: "01J151HQRHBKXJPH5K4T435AMF",
title: "カスタムタイトル",
});
``