📝(react) add RHF examples
Rework a bit the recent work made on RHF example to make some component more generic, such as RhfSelect and RhfDatepicker, which is based on a design using RHF context hooks to provide a seamless integration. Fixes #144
This commit is contained in:
26
packages/react/src/components/Forms/Select/stories-utils.tsx
Normal file
26
packages/react/src/components/Forms/Select/stories-utils.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import React from "react";
|
||||
import { Select } from ":/components/Forms/Select/index";
|
||||
import { SelectProps } from ":/components/Forms/Select/mono";
|
||||
|
||||
export const RhfSelect = (props: SelectProps & { name: string }) => {
|
||||
const { control } = useFormContext();
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={props.name}
|
||||
render={({ field, fieldState }) => {
|
||||
return (
|
||||
<Select
|
||||
{...props}
|
||||
state={fieldState.error ? "error" : "default"}
|
||||
text={fieldState.error?.message}
|
||||
onBlur={field.onBlur}
|
||||
onChange={field.onChange}
|
||||
value={field.value}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user