@bearei/react-form

react-form

Base form components that support React and React native

Installation

yarn add @bearei/react-form --save

Parameters

Form

Name	Type	Required	Description
form	FormInstance	✘	Form instance
initialValues	Record<string, unknown>	✘	Initializes the form value
items	BaseFormItemProps	✘	Form items
onFinish	(options: OnFinishOptions) => void	✘	This function is called when the form is completed
onFinishFailed	(options: Errors) => void	✘	This function is called when the form fails to complete
onValuesChange	(changedValues: Record<string, unknown>, values: Record<string, unknown>) => void	✘	This function is called when the form field value changes
renderMain	(props: FormMainProps) => ReactNode	✔	Render the form main
renderContainer	(props: FormContainerProps) => ReactNode	✔	Render the form container

Form Item

Name	Type	Required	Description
name	string	✘	Form item field name
label	ReactNode	✘	Form item label
noStyle	ReactNode	✘	Whether the form item is unstyled
initialValue	unknown	✘	The initial value of the form item
extra	ReactNode	✘	Additional content for the form item
required	boolean	✘	Whether the form entry is a required field
renderControl	(props: ControlProps) => JSX.Element	✘	Render the controlled component
rules	RuleItem[]	✘	Validate rules -- RuleItem
validateFirst	boolean	✘	When a rule fails, do you stop checking the rest of the rules
renderLabel	(props: FormItemLabelProps) => ReactNode	✘	Render the form item label
renderExtra	(props: FormItemExtraProps) => ReactNode	✘	Render the form item extra
renderMain	(props: FormItemMainProps) => ReactNode	✔	Render the form item main
renderContainer	(props: FormItemContainerProps) => ReactNode	✔	Render the form item container

Api

Form instance

Name	Type	Description
getFieldEntities	(signOut?: boolean) => FieldEntity[]	Gets the form field entities
getFieldEntitiesName	(names?: string[], signOut?: boolean) => (string)[]	Gets the form field entities name
signInField	(entity: FieldEntity) => {signOut: () => void}	Sign in form field
signOutField	(name?: NamePath) => void	Sign out form field
setFieldsValue	(values?: Record<string, unknown>, options?: {validate?: boolean; response?: boolean}) => void	Set the value of the form fields
getFieldValue	(name?: NamePath): unknown	Gets the value of the form field
setFieldError	(error: Errors) => void	Error setting form field
getFieldError	(name?: NamePath): Errors	Gets the form field error
setInitialValues	(values?: Record<string, unknown>, init?: boolean) => void	Set the form initialization value
getInitialValues	() => Record<string, unknown>	Gets the form initialization value
setCallbacks	(callbackValues: Callbacks) => void	Sets the form callbacks
setFieldTouched	(name?: string, touched?: boolean) => void	Sets whether the form field is operated on
isFieldTouched	(name?: NamePath) => boolean	Check that the form fields have been manipulated
validateField	(name?: NamePath): Promise<Errors>	Validate form field
resetField	(name?: NamePath) => void	Reset the form field
submit	(skipValidate?: boolean) => void	Complete the form field submission

Use

import React from 'React';
import ReactDOM from 'react-dom';
import form, { FormItem } from '@bearei/react-form';

interface CostInputProps {
  onValueChange?: (value: string) => void;
  value?: unknown;
}

const CostInput: FC<CostInputProps> = ({ value, onValueChange }) => {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const inputtedValue = e.currentTarget.value;

    setInputValue(inputtedValue);
    onValueChange?.(inputtedValue);
  };

  useEffect(() => {
    value && value !== inputValue && setInputValue(`${value}`);
  }, [value]);

  return <input value={inputValue} onChange={handleChange} />;
};

const items = [
  {
    label: 'label1',
    name: 'name1',
    renderControl: (props: ControlProps) => <CostInput {...props} />,
  },
  {
    label: 'label2',
    name: 'name2',
    renderControl: (props: ControlProps) => <CostInput {...props} />,
  },
  {
    label: 'label3',
    name: 'name3',
    renderControl: (props: ControlProps) => <CostInput {...props} />,
  },
];

const form = (
  <Form
    items={items}
    renderMain={({ items }) =>
      items?.map((item, index) => (
        <Form.Item
          key={item.name}
          {...item}
          renderMain={({ value, onValueChange, renderControl }) =>
            renderControl?.({ value, onValueChange })
          }
          renderContainer={({ children }) => <div>{children}</div>}
        />
      ))
    }
    renderContainer={({ children }) => <div>{children}</div>}
  />
);

ReactDOM.render(form, container);