How to use the react.useContext function in react

function useSignatureRequestSubscription(multiSignatureServiceURL: string, accounts: Account[]) {
  const accountIDs = accounts.map(account => account.publicKey)

  const { ignoredSignatureRequests } = React.useContext(SettingsContext)
  const subscribersRef = React.useRef({ newRequestSubscribers: [] })
  const [pendingSignatureRequests, setPendingSignatureRequests] = React.useState([])

  React.useEffect(
    () => {
      if (accounts.length === 0) {
        // The GET request will otherwise fail if there are no accounts to be queried
        return () => undefined
      }

      fetchSignatureRequests(multiSignatureServiceURL, accountIDs)
        .then(requests => setPendingSignatureRequests(requests.reverse()))
        .catch(trackError)

      const unsubscribe = subscribeToSignatureRequests(multiSignatureServiceURL, accountIDs, {
        onNewSignatureRequest: signatureRequest => {

export const useAnimationContext = (
  isMounted: boolean,
  transitionItem: T.TransitionItem,
  _resolvedAnimationType?: ConfigAnimationType,
) => {
  const animationStatus = useRef({
    isInAnimationContext: false,
  });
  const interpolationInfos = useRef>([]);
  const isInitialAnimation = useRef(true);
  const startTime = Date.now();

  const logger = useLog(transitionItem.label, "animc");
  const context = useContext(T.AnimationContext);

  const externalDriverInfosRef = useRef([]);
  const driverContext = useContext(T.DriverContext);
  const driverContextActiveRef = useRef(false);
  if (
    driverContext &&
    driverContext.isActive() !== driverContextActiveRef.current
  ) {
    driverContextActiveRef.current = driverContext.isActive();
    // If we have a disabled driver context we should remove
    // interpolations created when the context was active
    if (!driverContextActiveRef.current) {
      externalDriverInfosRef.current.forEach(ip => {
        unregisterRunningInterpolation(ip.itemId, ip.key, ip.id);
      });
      externalDriverInfosRef.current = [];

export default props => {
  const {
    type,
    matchedResources,
    current,
    setActiveResource,
    updateUrlQuery,
    blocks,
    selectedTag,
    setSelectedTag,
    loading,
  } = props;
  const { api } = useContext(Context);
  const { uniq, flatten } = api._;

  const tags: string[] = useMemo(
    () => uniq(flatten(blocks.map(item => (item.category ? [item.category] : item.tags)))),
    [blocks],
  );

  // const sortTagMap = {
  //   表格: 10,
  //   表单: 9,
  //   通用: 8,
  //   列表: 7,
  //   用户: 6,
  //   数据录入: 5,
  //   数据展示: 4,
  //   基本: 3,

function useCanvasLoadEffect() {
    const canvas = useCanvas()
    const load = useCanvasLoadCallback()
    const { error, setError } = useController()
    const { match } = useContext(RouterContext.Context)
    const { isPending } = usePending('canvas.LOAD')

    const { id: urlId } = match.params
    const currentCanvasRootId = canvas && CanvasState.getRootCanvasId(canvas)
    const canvasId = currentCanvasRootId || urlId
    const shouldLoad = !error && urlId && canvasId && currentCanvasRootId !== canvasId && !isPending

    useEffect(() => {
        // load canvas if needed and not already loading
        if (shouldLoad) {
            load(canvasId).catch(setError)
        }
    }, [shouldLoad, canvasId, load, setError])
}

const RightPanel = () => {
  const [{ rightPanelDisplay, url }, _] = useContext(GlobalContext);
  console.log(url);
  return (
    <div id="{styles.rightPanel}">
      {url &amp;&amp; rightPanelDisplay === 'browserView' ?  : &lt;&gt;}
      {!url || rightPanelDisplay === 'codeEditorView' ?  : &lt;&gt;}
    </div>
  );
};
export default RightPanel;

export const Navtabs = () => {
  const { translate } = React.useContext(I18nContext)
  const location = useLocation()
  const { Socket } = React.useContext(ApiContext)

  const userContext = React.useContext(UserContext)
  const { newEvents, hasNextPage } = React.useContext(EventsContext)

  useEffect(() => {
    if (userContext.user && hasNextPage) {
      Socket.emit('events')
    }
  }, [userContext.user])

  const newEventsCount = userContext.user ? newEvents.length : 0
  Title.badgeCount = newEventsCount

  return (
    <div style="{{" id="navtabs">
      <div>
        <div>
          <ul>
            <li></li></ul></div></div></div>

export const useLabellingFlow = () => useContext(LabellingFlowContext);

const LoadedRom = () => {
  const { vision } = useContext(VisionContext)
  const [highlightCoordinates, setHighlightCoordinates] = useState([-1, -1])
  const [optShowGrid, setOptShowGrid] = useState(false)
  const [optShowOAM, setOptShowOAM] = useState(true)
  const [optShowPortals, setOptShowPortals] = useState(true)
  const [toolState, setToolState] = useTool()
  const [resolution, setResolution] = useState(1)

  useWhenVisionChanges(() => {
    setHighlightCoordinates([-1, -1])
  })

  return (

function Header() {
  const editorConfig = useContext(EditorContext);
  return (
    <nav>
      
        
      
      
      <div></div></nav>

const FooterSlider = ({
  isMobile,
  isTablet,
}) => {
  const posts = React.useContext(PostsContext) || [];
  let slidesToShow = 3;
  if (isTablet) slidesToShow = 2;
  if (isMobile) slidesToShow = 1;
  const settings = {
    className: 'footer-slider',
    slidesToShow,
  };

  return (
    <>
      
        {posts.map((post) => (
          <div>
            </div>