react-controlled-form-subscriber v0.2.5

Introduction

React Hook Form의 Controller를 모방한 제어 컴포넌트 방식의 폼 관리 Hook과 Component입니다.

• FormSubscriber로 해당 필드의 상태만을 구독하여, 폼 상태 관리에서 불필요한 리렌더링을 최소화합니다.
• 유효성 검사, 수정 여부 등 간단한 폼 관련 상태 및 유틸 함수 기능을 제공합니다.

Install

npm install react-controlled-form-subscriber

Getting started

Basic usage

import {
  FormSubscriber,
  useSubscribedForm,
} from "react-controlled-form-subscriber";

const getDefaultFields = () => ({
  name: "",
  age: 0,
});

const defaultFields = getDefaultFields();

const validators = {
  name: (value) => (value.length > 0 ? null : "Name is required"),
  age: (value) => (value > 0 ? null : "Age is required"),
};

const valueProcessors = {
  name: (event) => {
    const value = event.target.value;
    return value.trim();
  },
  age: (event) => {
    const value = event.target.value;
    return parseInt(value, 10);
  }
};


const MyForm = () => {
  const { control, getFields, reset } =
    useSubscribedForm(defaultFields, validators, valueProcessors);

  const onSubmit = (event) => {
    event.preventDefault();

    const fields = getFields();
    // Do anything with field values...
  };

  const onReset = (event) => {
    event.preventDefault();

    reset(getDefaultFields());
  };

  return (
    <form onSubmit={onSubmit}>
        <FormSubscriber control={control} fieldName="name">
          {({ register, error }) => {
            return (
              <>
                <input
                  type="text"
                  {...register()}
                />

                {error && <p>{error}</p>}
              </>
            );
          }}
        </FormSubscriber>
      </div>

      <FormSubscriber control={control} fieldName="age">
        {({ register, error }) => {
          return (
            <>
              <input
                type="number"
                {...register()}
              />

              {error && <p>{error}</p>}
            </>
          );
        }}
      </FormSubscriber>

      <div className="form-footer">
        <button type="submit" onClick={onSubmit}>
          Submit
        </button>

        <button type="button" onClick={onReset}>
          Reset
        </button>
    </form>
  );
};

API

useSubscribedForm

Arguments

Properties

FormSubscriber

Properties