TypeScript react.useContext函數代碼示例

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
  };
}

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

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

  ({
    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 });
  }

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])
}

/**
 * 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;
}

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

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

    return value
  }

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
}

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
	};
};

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
  }
}

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
}