react#useContext TypeScript Examples

The following examples show how to use react#useContext. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AppConsoleShell.tsx    From one-platform with MIT License 6 votes vote down vote up
function AppConsoleShell ( props: any ) {
  const { loading } = useContext( AppContext );

  return (
    <>
      <AppContextProvider>
        <Grid hasGutter>
          <GridItem span={ 3 } xl={2}>
            <Sidebar />
          </GridItem>
          <GridItem span={ 9 } xl={10}>
            { loading
              ? <Loader />
              : <main className="container">
                { props.children }
              </main> }
          </GridItem>
        </Grid>
      </AppContextProvider>
    </>
  )
}
Example #2
Source File: TabBar.tsx    From Demae with MIT License 6 votes vote down vote up
CartIcon = () => {
	const [cart] = useContext(CartContext)
	const items = cart?.items() || []
	const badgeContent = items.reduce((prev, current) => {
		return current.quantity + prev
	}, 0)
	return (
		<Badge badgeContent={badgeContent} color="secondary">
			<ShoppingCartIcon />
		</Badge>
	)
}
Example #3
Source File: LocalUserContext.tsx    From ReactNative-UIKit with MIT License 6 votes vote down vote up
LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
  const max = useContext(MaxUidContext);
  const min = useContext(MinUidContext);
  // if(min && min[0] && max )
  let localUser: UidInterface = max[0].uid === 'local' ? max[0] : min[0];
  return (
    <LocalContext.Provider value={localUser}>
      {props.children}
    </LocalContext.Provider>
  );
}
Example #4
Source File: DocumentNav.tsx    From react-doc-viewer with Apache License 2.0 6 votes vote down vote up
DocumentNav: FC<{}> = () => {
  const {
    state: { currentDocument, currentFileNo, documents },
    dispatch,
  } = useContext(DocViewerContext);

  if (documents.length <= 1 || !currentDocument) return null;

  let fileName = currentDocument.uri;

  const splitURL = fileName.split("/");
  if (splitURL.length) {
    fileName = splitURL[splitURL.length - 1];
  }

  return (
    <Container id="doc-nav">
      <p id="doc-nav-info">
        Doc {currentFileNo + 1} of {documents.length}
      </p>

      <ButtonPrev
        id="doc-nav-prev"
        onClick={() => dispatch(previousDocument())}
        disabled={currentFileNo === 0}
      >
        <PrevDocIcon color="#fff" size="60%" />
      </ButtonPrev>

      <ButtonNext
        id="doc-nav-next"
        onClick={() => dispatch(nextDocument())}
        disabled={currentFileNo >= documents.length - 1}
      >
        <NextDocIcon color="#fff" size="60%" />
      </ButtonNext>
    </Container>
  );
}
Example #5
Source File: context.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up
export function useAnchorWebapp(): App<AnchorContractAddress, AnchorConstants> &
  AnchorWebapp {
  const app = useApp<AnchorContractAddress, AnchorConstants>();
  const anchorApp = useContext(AnchorWebappContext);

  return useMemo(() => {
    return {
      ...app,
      ...anchorApp,
    };
  }, [anchorApp, app]);
}
Example #6
Source File: Test.tsx    From firetable with Apache License 2.0 6 votes vote down vote up
TestView = () => {
  const snackContext = useContext(SnackContext);

  useEffect(() => {
    // alert("OPEN");
    snackContext.open({
      variant: "progress",
      message: "Preparing files for download",
      duration: undefined,
    });

    snackContext.setProgress({ value: 90, target: 120 });
  }, []);

  return <></>;
}
Example #7
Source File: useCartCount.ts    From nextjs-shopify with MIT License 6 votes vote down vote up
export function useCartCount() {
  const { cart } = useContext(Context)
  if (cart == null || cart.lineItems.length < 1) {
    return 0
  }

  const count = cart.lineItems.reduce((totalCount, lineItem) => {
    return totalCount + lineItem.quantity
  }, 0)

  return count
}
Example #8
Source File: AskerInfoAssign.tsx    From caritas-onlineBeratung-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up
AskerInfoAssign = () => {
	const activeSession = useContext(ActiveSessionContext);
	const isLiveChat = isAnonymousSession(activeSession?.session);
	const { userData } = useContext(UserDataContext);

	return (
		!isLiveChat &&
		hasUserAuthority(AUTHORITIES.CONSULTANT_DEFAULT, userData) && (
			<>
				<Text
					text={translate('userProfile.reassign.title')}
					type="divider"
				/>
				<SessionAssign
					value={
						activeSession.consultant
							? activeSession.consultant.id
							: null
					}
				/>
			</>
		)
	);
}
Example #9
Source File: MinimapToolbar.tsx    From NewWorldMinimap with MIT License 6 votes vote down vote up
export default function MinimapToolbar(props: React.PropsWithChildren<IProps>) {
    const {
        className,
        hidden,
        children,
    } = props;
    const context = useContext(AppContext);
    const { classes } = useStyles();

    const rootClass = clsx(
        className,
        classes.toolbar,
        context.settings.transparentToolbar && classes.transparent,
        hidden && classes.hidden,
        className);

    return (
        <div className={rootClass}>
            {children}
        </div>
    );
}
Example #10
Source File: CGallery.tsx    From Cromwell with MIT License 6 votes vote down vote up
/** @internal */
export function CarouselOnChangeWatcher(props: {
    onChange: (index: number) => void;
}) {
    const carouselContext = useContext(CarouselContext);

    useEffect(() => {
        function onChange() {
            props.onChange(carouselContext.state.currentSlide);
        }
        carouselContext.subscribe(onChange);
        return () => carouselContext.unsubscribe(onChange);
    }, [carouselContext]);
    return <></>;
}
Example #11
Source File: BreadcrumbContext.tsx    From one-platform with MIT License 5 votes vote down vote up
useBreadcrumb = (): BreadcrumbContextProps =>
  useContext(BreadcrumbContext) as BreadcrumbContextProps
Example #12
Source File: Dialog.tsx    From Demae with MIT License 5 votes vote down vote up
useDialog = () => {
	return useContext(DialogContext)
}
Example #13
Source File: BtnTemplate.tsx    From ReactNative-UIKit with MIT License 5 votes vote down vote up
BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
  const {disabled = false} = props;
  const {styleProps} = useContext(PropsContext);
  const {BtnTemplateStyles, theme, iconSize, customIcon} = styleProps || {};

  const imageRef = React.useRef(null);

  // This fixes the tint issue in safari browser
  useImageDelay(imageRef, 10, '', props?.color || '');

  return (
    <TouchableOpacity
      style={styleProps?.BtnTemplateContainer}
      disabled={disabled}
      onPress={props.onPress}>
      <View
        style={[
          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
          props.style as object,
        ]}>
        <Image
          ref={Platform.OS === 'web' ? imageRef : undefined}
          style={{
            width: iconSize || 25,
            height: iconSize || 25,
            opacity: disabled ? 0.4 : 1,
            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
          }}
          resizeMode={'contain'}
          source={{
            uri: props.name
              ? customIcon?.[props.name]
                ? customIcon[props.name]
                : icons[props.name]
              : props.icon,
          }}
        />
      </View>
      <Text
        style={{
          textAlign: 'center',
          marginTop: 5,
          color: disabled ? 'grey' : props.color || theme || '#fff',
          opacity: disabled ? 0.4 : 1,
        }}>
        {props.btnText}
      </Text>
    </TouchableOpacity>
  );
}
Example #14
Source File: MediaQueryProvider.tsx    From akashlytics with GNU General Public License v3.0 5 votes vote down vote up
export function useMediaQueryContext() {
  return useContext(MediaQueryContext);
}
Example #15
Source File: PDFControls.tsx    From react-doc-viewer with Apache License 2.0 5 votes vote down vote up
PDFControls: FC<{}> = () => {
  const {
    state: { mainState, paginated, zoomLevel, numPages },
    dispatch,
  } = useContext(PDFContext);

  const currentDocument = mainState?.currentDocument || null;

  return (
    <Container id="pdf-controls">
      {paginated && numPages > 1 && <PDFPagination />}

      {currentDocument?.fileData && (
        <DownloadButton
          id="pdf-download"
          href={currentDocument?.fileData as string}
          download={currentDocument?.uri}
        >
          <DownloadPDFIcon color="#000" size="75%" />
        </DownloadButton>
      )}

      <ControlButton
        id="pdf-zoom-out"
        onMouseDown={() => dispatch(setZoomLevel(zoomLevel - 0.1))}
      >
        <ZoomOutPDFIcon color="#000" size="80%" />
      </ControlButton>

      <ControlButton
        id="pdf-zoom-in"
        onMouseDown={() => dispatch(setZoomLevel(zoomLevel + 0.1))}
      >
        <ZoomInPDFIcon color="#000" size="80%" />
      </ControlButton>

      <ControlButton
        id="pdf-zoom-reset"
        onMouseDown={() => dispatch(setZoomLevel(initialPDFState.zoomLevel))}
        disabled={zoomLevel === initialPDFState.zoomLevel}
      >
        <ResetZoomPDFIcon color="#000" size="70%" />
      </ControlButton>

      {numPages > 1 && (
        <ControlButton
          id="pdf-toggle-pagination"
          onMouseDown={() => dispatch(setPDFPaginated(!paginated))}
        >
          <TogglePaginationPDFIcon
            color="#000"
            size="70%"
            reverse={paginated}
          />
        </ControlButton>
      )}
    </Container>
  );
}
Example #16
Source File: target.tsx    From anchor-web-app with Apache License 2.0 5 votes vote down vote up
useDeploymentTarget = (): UseDeploymentTargetReturn => {
  const context = useContext(DeploymentTargetContext);
  if (context === undefined) {
    throw new Error('The DeploymentTargetContext has not been defined.');
  }
  return context;
}
Example #17
Source File: Context.ts    From firetable with Apache License 2.0 5 votes vote down vote up
useConfirmation = () => useContext(ConfirmationContext)