How to use the informed.useFieldState 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 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 / Form / LightningInvoiceInput.js View on Github external
const LightningInvoiceInput = props => {
  const { network, chain, field } = props
  const intl = useIntl()
  const fieldState = useFieldState(field)
  const { value } = fieldState
  let chainName = isLn(value, chain, network) ? 'lightning' : chain
  if (network !== 'mainnet') {
    chainName += ` (${network})`
  }

  const doValidate = useCallback(value => validate(intl, network, chain, value), [
    chain,
    intl,
    network,
  ])

  return (
    <>
      <textarea mask="{mask}">      {value &amp;&amp; !fieldState.error &amp;&amp; (</textarea>
github Jordaneisenburger / fallback-studio / src / pwa-studio / packages / venia-concept / src / components / SearchBar / autocomplete.js View on Github external
const Autocomplete = props => {
    const { setVisible, visible } = props;

    const [queryResult, queryApi] = useQuery(PRODUCT_SEARCH);
    const { data, error, loading } = queryResult;
    const { resetState, runQuery, setLoading } = queryApi;

    const { value } = useFieldState('search_query');
    const valid = value && value.length > 2;

    const classes = mergeClasses(defaultClasses, props.classes);
    const rootClassName = visible ? classes.root_visible : classes.root_hidden;
    let message = '';

    if (error) {
        message = 'An error occurred while fetching results.';
    } else if (loading) {
        message = 'Fetching results...';
    } else if (!data) {
        message = 'Search for a product';
    } else if (!data.products.items.length) {
        message = 'No results were found.';
    } else {
        message = `${data.products.items.length} items`;

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