React runtime components, hooks, and utilities for Omnify schemas
npm install @famgia/omnify-reactReact runtime components, hooks, and utilities for Omnify schemas.
``bash`
npm install @famgia/omnify-reactor
pnpm add @famgia/omnify-react
- Components: Pre-built Japanese form field components (name, address, bank account)
- Hooks: Form mutation with Laravel error handling
- Utilities: Zod i18n, form validation, kana validation rules
`tsx
import {
JapaneseNameField,
JapaneseAddressField,
JapaneseBankField,
} from '@famgia/omnify-react';
import { customerSchemas, customerI18n } from './.omnify/schemas';
function CustomerForm() {
const [form] = Form.useForm();
return (
$3
`tsx
import { useFormMutation } from '@famgia/omnify-react';function CustomerForm() {
const [form] = Form.useForm();
const mutation = useFormMutation({
form,
mutationFn: (data) => axios.post('/api/customers', data),
invalidateKeys: [['customers']],
successMessage: '保存しました',
});
return (
);
}
`$3
`tsx
import { setZodLocale, zodRule, requiredRule } from '@famgia/omnify-react';
import { customerSchemas } from './.omnify/schemas';// Set locale once at app level
setZodLocale('ja');
function CustomerForm() {
return (
name="email"
rules={[zodRule(customerSchemas.email, 'メールアドレス')]}
>
name="name"
rules={[requiredRule('名前')]}
>
);
}
`$3
`tsx
import { kanaString, KATAKANA_PATTERN } from '@famgia/omnify-react';
import { z } from 'zod';// Method 1: Use kanaString helper
const schema = z.object({
name_kana: kanaString(), // 全角カタカナ (default)
});
// Method 2: Use pattern directly
const schema2 = z.object({
name_kana: z.string().regex(KATAKANA_PATTERN, '全角カタカナで入力してください'),
});
`API Reference
$3
| Component | Description |
| ---------------------- | ------------------------------------------------- |
|
JapaneseNameField | Japanese name input (lastname + firstname + kana) |
| JapaneseAddressField | Japanese address input with postal code lookup |
| JapaneseBankField | Japanese bank account input |$3
| Hook | Description |
| ----------------- | ----------------------------------------- |
|
useFormMutation | Form mutation with Laravel error handling |$3
| Function | Description |
| ------------------------------ | --------------------------------------------- |
|
setZodLocale(locale) | Set current locale for validation messages |
| getZodLocale() | Get current locale |
| zodRule(schema, displayName) | Convert Zod schema to Ant Design rule |
| requiredRule(displayName) | Create required rule with i18n |
| kanaString(options) | Create Zod string schema with kana validation |$3
| Preset | Description |
| ----------------------- | ---------------------- |
|
KATAKANA_FULL_WIDTH | 全角カタカナ (default) |
| KATAKANA_HALF_WIDTH | 半角カタカナ |
| HIRAGANA | ひらがな |
| KANA_ANY | All kana types |
| KATAKANA_WITH_NUMBERS | カタカナ + numbers |Peer Dependencies
-
react >= 18.0.0
- react-dom >= 18.0.0
- antd >= 6.0.0
- zod` >= 3.25.0MIT