How to use informed - 10 common examples

transform: translateX(13px);
  }
`

const Toggle = ({ fieldState, ...props }) => (
  
    <label>
      
      <span>
    </span></label>
  
)

export default asField(Toggle)

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>

const DialogWrapper = ({ intl, isOpen, walletDir, onDelete, onCancel }) => {
  useCloseOnUnmount(isOpen, onCancel)

  if (!isOpen) {
    return null
  }
  const checkboxFieldName = 'actionACK'

  // bind button disabled state to a form field or ignore it if we are dealing with a remote
  // wallet and don't have confirmation checkbox
  const DeleteWalletButton = withFieldState(checkboxFieldName)(({ fieldState, ...rest }) => (
    <button>
  ))

  const buttons = (
    &lt;&gt;
      
        
      
      </button><button type="button">
        
      </button>
    
  )

  const header = (

const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay }) => {
  useCloseOnUnmount(isOpen, onCancel)

  if (!isOpen) {
    return null
  }
  const checkboxFieldName = 'actionACK'
  // bind button disabled state to a form field
  const CloseChannelButton = withFieldState(checkboxFieldName)(({ fieldState, ...rest }) => (
    <button>
  ))

  const buttons = (
    &lt;&gt;
      
        
      
      </button><button type="button">
        
      </button>

const SearchField = props => {
    const { location, onChange, onFocus } = props;
    const { value } = useFieldState('search_query');
    const formApi = useFormApi();

    const setValue = useCallback(
        queryValue => {
            // update search field
            if (queryValue) {
                formApi.setValue('search_query', queryValue);
            }

            // trigger the effects of clearing the field
            if (typeof onChange === 'function') {
                onChange('');
            }
        },
        [formApi, onChange]
    );

const Braintree = props => {
    const [{ braintreeToken }, dispatch] = useCheckoutState();
    const [{ cart }, cartDispatch] = useCartState();

    const [dropinInstance, setDropinInstance] = useState(); // This state is gone after you leave the payment form
    const [paymentMethodRequestable, setPaymentMethodRequestable] = useState(false);
    const paymentNonceField = useFieldApi('payment_nonce');

    const [createBraintreeClientToken, { data: braintreeTokenData, error: braintreeTokenError }] = useMutation(
        CREATE_BRAINTREE_CLIENT_TOKEN
    );

    async function createDropinInstance() {
        try {
            // Tear down instance if it already exists, e.g. when switching between the PayPal and credit card form.
            if (dropinInstance) {
                await dropinInstance.teardown();
                setDropinInstance(false);
            }

            let paypal = false;
            if (props.accept === 'paypal') {
                const amount = {

const SearchField = props => {
    const { location, onChange, onFocus } = props;
    const { value } = useFieldState('search_query');
    const formApi = useFormApi();

    const setValue = useCallback(
        queryValue => {
            // update search field
            if (queryValue) {
                formApi.setValue('search_query', queryValue);
            }

            // trigger the effects of clearing the field
            if (typeof onChange === 'function') {
                onChange('');
            }
        },
        [formApi, onChange]
    );

import PropTypes from 'prop-types'
import { asField } from 'informed'
import * as yup from 'yup'
import { BasicInput } from './Input'

/**
 * @render react
 * @name PasswordInput
 */
class PasswordInput extends React.Component {
  render() {
    return 
  }
}

const PasswordInputAsField = asField(PasswordInput)

class WrappedPasswordInputAsField extends React.Component {
  static propTypes = {
    isDisabled: PropTypes.bool,
    isRequired: PropTypes.bool,
    minLength: PropTypes.number,
    validate: PropTypes.func,
  }

  static defaultProps = {
    isDisabled: false,
    isRequired: false,
    minLength: 8,
  }

  validate = value => {

import { asField } from 'informed'
import { Flex } from 'rebass'
import { WithOpenDialog } from 'hocs'
import Input from './Input'
import OpenDialogButton from './OpenDialogButton'

const InnerInput = styled(Input)`
  input {
    padding-right: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
`

const OpenDialogInput = asField(props => {
  return (
     (
        
          
           {
              const result = openDialog()
              //set value only if something was selected to avoid
              //overriding an existing state
              if (result) {
                props.fieldApi.setValue(result)
              }
            }}
          />

step="1"
        textAlign="right"
        type="number"
        width={70}
      />
    
  )
}

AutopilotAllocation.propTypes = {
  fieldApi: PropTypes.object.isRequired,
  fieldState: PropTypes.object.isRequired,
  sliderWidthNumber: PropTypes.number,
}

export default asField(AutopilotAllocation)