How to use informed - 10 common examples

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 LN-Zap / zap-desktop / app / components / UI / Toggle.js View on Github external
transform: translateX(13px);
  }
`

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

export default asField(Toggle)
github adobe / aem-core-cif-components / react-components / src / components / Checkout / paymentsFormItems.js View on Github external
const PaymentsFormItems = props =&gt; {
    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 / Home / DeleteWalletDialog.js View on Github external
const DialogWrapper = ({ intl, isOpen, walletDir, onDelete, onCancel }) =&gt; {
  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 }) =&gt; (
    <button>
  ))

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

  const header = (
github LN-Zap / zap-desktop / renderer / components / Channels / ChannelCloseDialog.js View on Github external
const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay }) =&gt; {
  useCloseOnUnmount(isOpen, onCancel)

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

  const buttons = (
    &lt;&gt;
      
        
      
      </button><button type="button">
        
      </button>
github Jordaneisenburger / fallback-studio / src / pwa-studio / packages / venia-concept / src / components / SearchBar / searchField.js View on Github external
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]
    );
github adobe / aem-core-cif-components / react-components / src / components / App / paymentProviders / braintree.js View on Github external
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 = {
github Jordaneisenburger / fallback-studio / src / pwa-studio / packages / venia-concept / src / components / SearchBar / searchField.js View on Github external
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]
    );
github LN-Zap / zap-desktop / renderer / components / UI / PasswordInput.js View on Github external
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 =&gt; {
github LN-Zap / zap-desktop / app / components / UI / OpenDialogInput.js View on Github external
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 =&gt; {
  return (
     (
        
          
           {
              const result = openDialog()
              //set value only if something was selected to avoid
              //overriding an existing state
              if (result) {
                props.fieldApi.setValue(result)
              }
            }}
          /&gt;
github LN-Zap / zap-desktop / renderer / components / Home / AutopilotAllocation.js View on Github external
step="1"
        textAlign="right"
        type="number"
        width={70}
      /&gt;
    
  )
}

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

export default asField(AutopilotAllocation)

informed

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

MIT
Latest version published 9 days ago

Package Health Score

81 / 100
Full package analysis