How to use the informed.useFormState function in informed

To help you get started, we’ve selected a few informed 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 adobe / aem-core-cif-components / react-components / src / components / Checkout / paymentsFormItems.js View on Github external
const PaymentsFormItems = props => {
    const [isReady, setIsReady] = useState(false);

    const { cancel, classes, countries, isSubmitting, setIsSubmitting, submit: submitPaymentData } = props;

    // Currently form state toggles dirty from false to true because of how
    // informed is implemented. This effectively causes this child components
    // to re-render multiple times. Keep tabs on the following issue:
    //   https://github.com/joepuzzo/informed/issues/138
    // If they resolve it or we move away from informed we can probably get some
    // extra performance.
    const formState = useFormState();
    const anchorRef = useRef(null);
    const addressDiffers = formState.values.addresses_same === false;

    const billingAddressFields = addressDiffers ? (
        
            <div>
                
                    
                
            </div>
            <div>
                
                    
                
            </div>
            <div></div>
github LN-Zap / zap-desktop / renderer / components / Settings / SettingsPage.js View on Github external
const SettingsActionBarButtons = () =&gt; {
  const formState = useFormState()
  const formApi = useFormApi()
  return (
    &lt;&gt;
      <button type="button">
        
      </button>

      <button> 0 &amp;&amp; formState.invalid}
        type="submit"
        variant="normal"
      &gt;
        
      </button>
github adobe / aem-core-cif-components / react-components / src / components / App / paymentProviders / paymentProvider.js View on Github external
const PaymentProvider = () =&gt; {
    const formState = useFormState();
    let child;

    switch (formState.values.payment_method) {
        case 'braintree': {
            child = ;
            break;
        }

        case 'braintree_paypal': {
            child = ;
            break;
        }

        default: {
            return null;
        }
github LN-Zap / zap-desktop / renderer / components / Settings / SettingsPage.js View on Github external
const SettingsActions = ({ currentConfig }) =&gt; {
  const formState = useFormState()
  const updatedConfig = merge({}, currentConfig, formState.values)
  const overrides = difference(updatedConfig, currentConfig)

  const hasChanges = Object.keys(overrides).length

  if (!hasChanges) {
    return null
  }

  return (
    
      } /&gt;
    
  )
}

informed

A lightweight framework and utility for building powerful forms in React applications

MIT
Latest version published 10 days ago

Package Health Score

84 / 100
Full package analysis