Skip to content

Instantly share code, notes, and snippets.

@Patrick-Ullrich
Created February 13, 2021 02:24
Show Gist options
  • Save Patrick-Ullrich/b6e6002088c4b2093dc78be674c56ddc to your computer and use it in GitHub Desktop.
Save Patrick-Ullrich/b6e6002088c4b2093dc78be674c56ddc to your computer and use it in GitHub Desktop.
Chakra UI Typescript Formik
export interface BaseProps {
label?: any;
name: string;
testid?: string;
formControlProps?: Omit<FormControlProps, 'children' | 'label'>;
}
import {
FormControl as ChakraFormControl,
FormControlProps as ChakraFormControlProps,
FormErrorMessage,
Text,
FormLabel,
FormLabelProps,
} from '@chakra-ui/react';
import React, { ReactNode } from 'react';
export type FormControlProps = Omit<ChakraFormControlProps, 'label'> & {
name?: string;
label: any;
testid?: string;
touched?: boolean;
error?: string;
hideError?: boolean;
children: ReactNode;
formLabelProps?: FormLabelProps;
};
export const FormControl = (props: FormControlProps) => {
const {
testid,
touched,
error,
my = 4,
label,
children,
hideError,
name,
formLabelProps,
...rest
} = props;
return (
<ChakraFormControl my={my} isInvalid={touched && !!error} {...rest}>
{label && (
<FormLabel
fontSize="14px"
fontWeight="400"
display="flex"
htmlFor={name}
{...formLabelProps}
>
{label}
</FormLabel>
)}
{children}
{hideError ? null : <FormErrorMessage>{error}</FormErrorMessage>}
</ChakraFormControl>
);
};
import { RadioGroup, RadioGroupProps, Stack, StackProps } from '@chakra-ui/react';
import { FastField, useFormikContext } from 'formik';
import React, { ReactNode } from 'react';
import { BaseProps } from '../baseProps';
import { FormControl } from '../FormControl/FormControl';
export type RadioGroupControlProps = BaseProps &
RadioGroupProps & {
children: ReactNode;
stackProps?: StackProps;
};
export const RadioGroupControl = (props: RadioGroupControlProps) => {
const { children, name, label, formControlProps, stackProps, ...rest } = props;
return (
<FormControl name={name} label={label} {...formControlProps}>
<RadioGroup {...rest}>
<Stack direction="row" {...stackProps}>
{children}
</Stack>
</RadioGroup>
</FormControl>
);
};
export type FormRadioGroupControlProps = Overwrite<RadioGroupControlProps, { name: string }>;
export const FormRadioGroupControl = (props: FormRadioGroupControlProps) => {
const { name, children, formControlProps, ...rest } = props;
const { setFieldValue } = useFormikContext();
return (
<FastField name={name}>
{({ field, meta }) => (
<RadioGroupControl
{...rest}
formControlProps={{
...formControlProps,
isInvalid: meta.error && meta.touched,
...meta,
}}
{...field}
onChange={(value: string) => setFieldValue(name, value)}
>
{children}
</RadioGroupControl>
)}
</FastField>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment