TypeScript react.useContext函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中react.useContext函数的典型用法代码示例。如果您正苦于以下问题：TypeScript useContext函数的具体用法？TypeScript useContext怎么用？TypeScript useContext使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了useContext函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: useField

export default function useField(name: string) {
  const {
    initialData,
    errors,
    scopePath,
    unregisterField,
    registerField
  } = useContext(FormContext);

  const fieldName = scopePath ? `${scopePath}.${name}` : name;

  useEffect(() => {
    return () => unregisterField(fieldName);
  }, []);

  const defaultValue = dot.pick(fieldName, initialData);
  const error = errors[fieldName];

  return {
    fieldName,
    registerField,
    defaultValue,
    error
  };
}

开发者ID:isacmoura，项目名称:unform，代码行数:25，代码来源:useField.ts

示例2: useContext

export const useExit = (error?: Error) => {
  const { exit } = useContext(AppContext);

  useEffect(() => {
    (exit as any)(error);
  }, [exit]);
};

开发者ID:valtech-nyc，项目名称:brookjs，代码行数:7，代码来源:util.ts

示例3: useContext

  ({
    children,
    filterQuery,
    visibleMidpointTime,
  }: {
    children: RendererFunction<{ buckets: LogSummaryBuckets }>;
    filterQuery: string | null;
    visibleMidpointTime: number | null;
  }) => {
    const { intervalSize } = useContext(LogViewConfiguration.Context);
    const { sourceId } = useContext(Source.Context);

    const { buckets } = useLogSummary(sourceId, visibleMidpointTime, intervalSize, filterQuery);

    return children({ buckets });
  }

开发者ID:elastic，项目名称:kibana，代码行数:16，代码来源:with_summary.ts

示例4: clearInterval

const useDragAndDropContainerEvents = ({margin = 20}: {margin?: number} = {}) => {
  const {activeKey} = React.useContext(DragAndDropContext)
  const isDragging = activeKey !== null

  const scrollingTimeoutRef = React.useRef<NodeJS.Timeout>()

  const clearScroll = React.useCallback(() => {
    if (scrollingTimeoutRef.current !== undefined) {
      clearInterval(scrollingTimeoutRef.current)
      scrollingTimeoutRef.current = undefined
    }
  }, [])

  React.useEffect(() => {
    if (!isDragging) {
      clearScroll()
    }
  }, [clearScroll, isDragging])

  return React.useMemo(() => {
    const scroll = (containerElement: HTMLElement, {isUpward}: {isUpward: boolean}) => {
      clearScroll()

      scrollingTimeoutRef.current = setInterval(() => {
        containerElement.scrollTo({
          top: containerElement.scrollTop + (isUpward ? -1 : 1) * 20
        })
      }, 50)
    }

    const onMouseMove = (evt: MouseEvent | React.MouseEvent) => {
      if (!isDragging) return

      if (evt.currentTarget instanceof HTMLElement) {
        const rect = evt.currentTarget.getBoundingClientRect()

        const displacementTop = Math.abs(rect.top - evt.clientY)
        const displacementBottom = Math.abs(rect.bottom - evt.clientY)

        if (displacementTop <= margin) {
          scroll(evt.currentTarget, {
            isUpward: true
          })
        } else if (displacementBottom <= margin) {
          scroll(evt.currentTarget, {
            isUpward: false
          })
        } else {
          clearScroll()
        }
      }
    }

    return {
      onMouseMove
    }
  }, [clearScroll, isDragging, margin])
}

开发者ID:foray1010，项目名称:Popup-my-Bookmarks，代码行数:58，代码来源:useDragAndDropContainerEvents.ts

示例5: useLocale

/**
 * Hook that returns a function to translate strings.
 */
export default function useLocale(wildcard: string): tFunc {
	const {curLang, locales} = useContext(LocaleContext);

	function t(str: string | TemplateStringsArray,
			...args: (string | number)[]): string {
		return rawTranslate(curLang, locales, wildcard, str, ...args);
	}

	return t;
}

开发者ID:rodrigocfd，项目名称:wikipedia-templates，代码行数:13，代码来源:useLocale.ts

示例6: useContext

  function useContext() {
    const value = React.useContext(Context)

    if (value === null) {
      throw new Error(
        `${useValue.name} must be used within a ${Provider.displayName}`
      )
    }

    return value
  }

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:11，代码来源:createUseContext.ts

示例7: useContext

export function useStorage<T>(key: string, defaultValue: T) {
  const storage = useContext(StorageContext)
  const [value, set] = useState(() => load(storage, key, defaultValue))

  useEffect(() => {
    store(storage, key, value)
  }, [value])

  useEffect(() => {
    set(load(storage, key, defaultValue))
  }, [key, storage])

  return [value, set] as const
}

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:14，代码来源:useStorage.ts

示例8: useContext

const useNotistack = () => {
	const enqueueSnackbar = useContext(SnackbarContextNext);

	const enqueueSuccess = (message: string) =>
		enqueueSnackbar(message, {
			variant: 'success'
		});

	const enqueueError = (message: string) =>
		enqueueSnackbar(message, {
			variant: 'error'
		});

	return {
		enqueueError,
		enqueueSuccess
	};
};

开发者ID:kvasnyk，项目名称:CILantro，代码行数:18，代码来源:useNotistack.ts

示例9: setBodySizeStack

const useBodySizeStack = (): {
  globalBodySize?: BodySize
  appendBodySize: (state: BodySize) => void
  removeBodySize: (state: BodySize) => void
} => {
  const {bodySizeStack, setBodySizeStack} = React.useContext(AbsolutePositionContext)

  const globalBodySize = React.useMemo(() => {
    return bodySizeStack.reduce(
      (acc, bodySize) => {
        return {
          height: bodySize.height ? Math.max(bodySize.height, acc.height || 0) : acc.height,
          width: bodySize.width ? Math.max(bodySize.width, acc.width || 0) : acc.width
        }
      },
      {
        height: undefined,
        width: undefined
      }
    )
  }, [bodySizeStack])

  const appendBodySize = React.useCallback(
    (newBodySize: BodySize) => {
      setBodySizeStack((prevBodySize) => [...prevBodySize, newBodySize])
    },
    [setBodySizeStack]
  )

  const removeBodySize = React.useCallback(
    (oldBodySize: BodySize) => {
      setBodySizeStack((prevBodySize) => {
        return prevBodySize.filter((state) => state !== oldBodySize)
      })
    },
    [setBodySizeStack]
  )

  return {
    globalBodySize,
    appendBodySize,
    removeBodySize
  }
}

开发者ID:foray1010，项目名称:Popup-my-Bookmarks，代码行数:44，代码来源:useGlobalBodySize.ts

示例10: useImg

export function useImg(page: Page) {
  const unmounted = useUnmount()
  const { fetchImage } = useContext(ClientContext)
  const [url, setUrl] = useState(() =>
    page.urls.small.replace('540x540_70', '150x150')
  )

  useEffect(() => {
    if (url === page.urls.original) return

    fetchImage(page.urls.original).then(src => {
      if (unmounted.current) return
      if (src === null) return

      setUrl(src)
    })
  }, [])

  return url
}

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:20，代码来源:useImg.ts

注：本文中的react.useContext函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。