How to use react-final-form - 10 common examples

export default function ResourceLink({ reference, source, dest, children }) {
  // const form = useForm();
  // const localValue = form.getFieldState(source);
  const localValue = useField(source);
  const query = encodeURIComponent(
    JSON.stringify({
      [dest]: localValue.input.value
    })
  );
  const title = titleize(reference);
  return (
    <button label="{`Add">
      {children}</button>

const CheckboxArrayControl = ({ name, value, children }) => {
  const {
    input: { checked, ...input },
    meta: { error, touched }
  } = useField(name, {
    type: 'checkbox', // important for RFF to manage the checked prop
    value // important for RFF to manage list of strings
  })
  return (
    
      {children}
    
  )
}

// visuals
  name,
  label,
  inverseLabel,
  inverseColor = 'black',
  className,

  //
  disabled = false,

  ...rest
}) {
  const {
    input,
    meta: { submitting, submitSucceeded },
  } = useField(name, { type: 'checkbox' });

  disabled = disabled || submitting || submitSucceeded;

  return (
    
      {/* we totally hide the checkbox itself */}

id,
    name,
    source,
    validate,
    onBlur: customOnBlur,
    onChange: customOnChange,
    onFocus: customOnFocus,
    ...options
}: InputProps): ComputedInputProps => {
    const finalName = name || source;

    const sanitizedValidate = Array.isArray(validate)
        ? composeValidators(validate)
        : validate;

    const { input, meta } = useFinalFormField(finalName, {
        initialValue: defaultValue,
        validate: sanitizedValidate,
        ...options,
    });

    // Extract the event handlers so that we can provide ours
    // allowing users to provide theirs without breaking the form
    const { onBlur, onChange, onFocus, ...inputProps } = input;

    const handleBlur = useCallback(
        event => {
            onBlur(event);

            if (typeof customOnBlur === 'function') {
                customOnBlur(event);
            }

export default function SelectInput({
  name,
  label,
  placeholder,
  className,
  mono = false,
  options = [],
  disabled = false,
  warning,
}) {
  const {
    input,
    meta: { active, error, submitting, submitSucceeded, touched, valid },
  } = useField(name, {
    type: 'select',
  });

  disabled = disabled || submitting || submitSucceeded;

  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();

  // close select on outside clicks
  useOnClickOutside(ref, useCallback(() => setIsOpen(false), [setIsOpen]));

  const toggleOpen = useCallback(() => {
    input.onFocus();
    setIsOpen(isOpen => !isOpen);
  }, [input]);

const useFieldArray = (
  name: string,
  {
    subscription = all,
    defaultValue,
    initialValue,
    isEqual = defaultIsEqual,
    validate: validateProp
  }: UseFieldArrayConfig = {}
): FieldArrayRenderProps => {
  const form = useForm('useFieldArray')

  const formMutators: Mutators = form.mutators
  const hasMutators = !!(formMutators && formMutators.push && formMutators.pop)
  if (!hasMutators) {
    throw new Error(
      'Array mutators not found. You need to provide the mutators from final-form-arrays to your form'
    )
  }
  const mutators = useConstant(() =>
    // curry the field name onto all mutator calls
    Object.keys(formMutators).reduce((result, key) => {
      result[key] = (...args) => formMutators[key](name, ...args)
      return result
    }, {})
  )

const useInitializeFormWithRecord = record => {
    const form = useForm();

    useEffect(() => {
        if (!record) {
            return;
        }

        const registeredFields = form.getRegisteredFields();

        // react-final-form does not provide a way to set multiple values in one call.
        // Using batch ensure we don't get rerenders until all our values are set
        form.batch(() => {
            Object.keys(record).forEach(key => {
                // We have to check the record key is actually registered as a field
                // as some record keys may not have a matching input
                if (registeredFields.some(field => field === key)) {
                    form.change(key, record[key]);

as: As = ForwardButton,
  className,
  children,
  handleSubmit,
  ...rest
}) {
  const {
    valid,
    validating,
    submitting,
    hasValidationErrors,
    hasSubmitErrors,
    dirtySinceLastSubmit,
    submitErrors,
    submitSucceeded,
  } = useFormState();

  const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

  // can submit if:
  // 1) is valid
  //      OR has submit errors
  //      AND
  //        a) is dirty
  //        b) OR only has a warning (double conf)
  // 2) AND is not validating
  // 3) AND has no validation errors
  // 4) AND is not actively submitting
  // 5) AND submit has not yet succeeded
  const canSubmit =
    (valid ||
      (hasSubmitErrors &&

choice,
    optionText,
    optionValue,
    source,
    translateChoice,
}) => {
    const { getChoiceText, getChoiceValue } = useChoices({
        optionText,
        optionValue,
        translateChoice,
    });
    const label = getChoiceText(choice);
    const value = getChoiceValue(choice);
    const {
        input: { type, onChange, ...inputProps },
    } = useField(source, {
        type: 'radio',
        value,
    });

    const nodeId = `${source}_${label}`;

    return (
         onChange(value)}
                    {...inputProps}

export default function UploadInput({ name, label, ...rest }) {
  const {
    input,
    meta: { validating, submitting, touched, active, error },
  } = useField(name, { type: 'text' });

  const handleUpload = useCallback(
    element => {
      input.onFocus();

      const file = element.files.item(0);
      const reader = new FileReader();

      reader.onload = e => {
        input.onChange({ target: { value: e.target.result } });
      };

      const failure = _ => {
        input.onBlur();
      };