How to use the react-final-form.useForm function in react-final-form

To help you get started, we’ve selected a few react-final-form examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github final-form / react-final-form-arrays / src / useFieldArray.js View on Github external
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
    }, {})
  )
github marmelab / react-admin / packages / ra-core / src / form / useInitializeFormWithRecord.ts View on Github external
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]);
github coralproject / talk / src / core / client / admin / routes / Configure / sections / Email / EmailConfigContainer.tsx View on Github external
const EmailConfigContainer: React.FunctionComponent = ({
  email,
  submitting,
}) => {
  const form = useForm();
  useMemo(() => {
    let values: any = { email };
    if (email && email.smtp && email.smtp.authentication === null) {
      values = {
        email: {
          ...email,
          smtp: { ...email.smtp, authentication: true },
        },
      };
    }
    if (email && email.smtp && email.smtp.secure === null) {
      values = {
        email: {
          ...email,
          smtp: { ...email.smtp, secure: true },
        },
github final-form / react-final-form / examples / chakra / index.js View on Github external
const PercentComplete = props => {
  const form = useForm()
  const numFields = form.getRegisteredFields().length
  const numErrors = Object.keys(form.getState().errors).length
  return (
    <progress value="{numFields">
  )
}
</progress>
github urbit / bridge / src / form / ValuesHandler.js View on Github external
export default function ValuesHandler({ valid, validating, values, onValues }) {
  const form = useForm();
  const validationPaused = form.isValidationPaused();

  useEffect(() => {
    if (!validating && !validationPaused) {
      onValues && onValues({ valid, values, form });
    }
  }, [form, onValues, valid, validating, validationPaused, values]);

  return null;
}
github coralproject / talk / src / core / client / admin / routes / Configure / sections / Advanced / AdvancedConfigContainer.tsx View on Github external
const AdvancedConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) =&gt; {
  const form = useForm();
  useMemo(() =&gt; form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
      
      
    
  );
};
github coralproject / talk / src / core / client / admin / routes / Configure / sections / Organization / OrganizationConfigContainer.tsx View on Github external
const OrganizationConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) =&gt; {
  const form = useForm();
  useMemo(() =&gt; form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
    
  );
};
const enhanced = withFragmentContainer({
github coralproject / talk / src / core / client / admin / routes / Configure / sections / Moderation / ModerationConfigContainer.tsx View on Github external
export const ModerationConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) =&gt; {
  const form = useForm();
  useMemo(() =&gt; form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
      
    
  );
};

react-final-form

🏁 High performance subscription-based form state management for React

MIT
Latest version published 2 years ago

Package Health Score

64 / 100
Full package analysis