How to use the vtex.render-runtime.useChildBlock function in vtex

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

github vtex-apps / store-components / react / components / SearchBar / components / SearchBar.js View on Github external
const fallback = (
    <AutocompleteInput
      placeholder={placeholder}
      onInputChange={onInputChange}
      inputValue={inputValue}
      hasIconLeft={hasIconLeft}
      iconClasses={iconClasses}
      iconBlockClass={iconBlockClass}
      inputErrorMessage={inputErrorMessage}
      onGoToSearchPage={onGoToSearchPage}
    />
  )

  const isAutocompleteDeclared = Boolean(
    useChildBlock({ id: AUTCOMPLETE_EXTENSION_ID })
  )

  const SelectedAutocompleteResults = useMemo(() => {
    return isAutocompleteDeclared
      ? props => <ExtensionPoint id={AUTCOMPLETE_EXTENSION_ID} {...props} />
      : props => <AutocompleteResults {...props} />
  }, [isAutocompleteDeclared])

  return (
    <div
      ref={container}
      className={classNames('w-100 mw7 pv4', styles.searchBarContainer)}
      style={{
        ...(maxWidth && {
          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
        }),