react#FC TypeScript Examples

The following examples show how to use react#FC. 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: CircleButton.tsx    From react-circular-menu with Apache License 2.0 6 votes vote down vote up
CircleButton: FC<CircleButtonProps> = (props) => {
  const {
    link,
    target,
    tooltip,
    tooltipPlacement,
    onClick,
    size,
    ...commonProps
  } = props;

  return link ? (
    <StyledLink {...commonProps} $size={size} href={link} target={target} />
  ) : (
    <StyledButton {...commonProps} $size={size} onClick={onClick} />
  );
}
Example #2
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 #3
Source File: Head.tsx    From nextjs-shopify with MIT License 6 votes vote down vote up
Head: FC<{ seoInfo: any }> = (props) => {
  return (
    <>
      <DefaultSeo {...props.seoInfo} />
      <NextHead>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
        <link
          rel="icon"
          type="image/png"
          href="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F2d86a5bb30f44d2db3564aa2962bb093"
        />
      </NextHead>
    </>
  )
}
Example #4
Source File: Xwrapper.tsx    From react-xarrows with MIT License 6 votes vote down vote up
XarrowProvider: FC<{ instanceCount: React.MutableRefObject<number> }> = ({ children, instanceCount }) => {
  const [, setRender] = useState({});
  const updateXarrow = () => setRender({});
  useEffect(() => {
    instanceCount.current = updateRefCount; // so this instance would know what is id
    updateRef[instanceCount.current] = updateXarrow;
  }, []);
  // log('XarrowProvider', updateRefCount);
  return <XarrowContext.Provider value={updateXarrow}>{children}</XarrowContext.Provider>;
}
Example #5
Source File: Cell.tsx    From react-datasheet-grid with MIT License 6 votes vote down vote up
Cell: FC<{
  gutter: boolean
  stickyRight: boolean
  disabled?: boolean
  column: Column<any, any, any>
  className: string
  active?: boolean
  children?: any
}> = ({
  children,
  gutter,
  stickyRight,
  column,
  active,
  disabled,
  className,
}) => {
  return (
    <div
      className={cx(
        'dsg-cell',
        gutter && 'dsg-cell-gutter',
        disabled && 'dsg-cell-disabled',
        gutter && active && 'dsg-cell-gutter-active',
        stickyRight && 'dsg-cell-sticky-right',
        className
      )}
      style={{
        flex: String(column.width),
        minWidth: column.minWidth,
        maxWidth: column.maxWidth,
      }}
    >
      {children}
    </div>
  )
}
Example #6
Source File: BaseContainer.tsx    From generator-earth with MIT License 6 votes vote down vote up
contextHoc: (Comp: ComponentType) => ComponentType = function contextHoc(Comp) {
    // class组件
    if ( Comp.prototype.render ) {
        let C = Comp as ComponentClass;
        C.contextType = BaseContext;
        return C;
    // function组件
    } else {
        let fc = Comp as FC
        return function(props) {
            return (
                <BaseContext.Consumer>
                { (context) => fc(props, context) }
                </BaseContext.Consumer>
            )
        }
    }
}
Example #7
Source File: popup-page.tsx    From wereader with MIT License 6 votes vote down vote up
Popup: FC<IProps> = () => {
	return (
		<div>
			<TabBtnContainer>
				<TabBtn id='shelfBtn' value='书架'></TabBtn>
			</TabBtnContainer>
			<NoteTabContent/>
			<TabContent for='shelfBtn' id='shelf'>
				<a>...</a>
			</TabContent>
		</div>
	);
}
Example #8
Source File: ArticleList.tsx    From personal-archive with MIT License 6 votes vote down vote up
ArticleList: FC<Props> = ({articles, pagination, onSelectPage, onReload}) => {
  const [selectedIDs, select, renderDeleteBtn] = useSelectedIDs(onReload)

  return (
    <>
      {
        articles.map((article, i) => (
          <ArticleListItem
            article={article}
            isSelected={selectedIDs.indexOf(article.id) >= 0}
            onSelect={select}
            key={i}
          />
        ))
      }
      {renderDeleteBtn()}
      <PaginationDiv>
        <Pagination
          pageCount={pagination.totalPages}
          selectedPage={pagination.page}
          onPageChange={onSelectPage}
        />
      </PaginationDiv>
    </>
  )
}
Example #9
Source File: EmptyFallback.tsx    From atlas with GNU General Public License v3.0 6 votes vote down vote up
EmptyFallback: FC<EmptyFallbackProps> = ({
  title,
  subtitle,
  variant = 'large',
  button,
  verticalCentered,
  className,
}) => (
  <Container className={className} variant={variant} verticalCentered={verticalCentered}>
    <SvgEmptyStateIllustration />
    <Message>
      {title && <Title variant={variant === 'large' ? 'h500' : 't300'}>{title}</Title>}
      {variant === 'large' && subtitle && (
        <Subtitle variant="t200" secondary>
          {subtitle}
        </Subtitle>
      )}
    </Message>
    {variant === 'large' && button && <ButtonWrapper>{button}</ButtonWrapper>}
  </Container>
)
Example #10
Source File: CouponTag.tsx    From Shopping-Cart with MIT License 6 votes vote down vote up
CouponTag: FC<PropTypes> = props => {
  const { label, color, tooltip } = props;

  return (
    <Tooltip title={tooltip} placement="bottom">
      <Tag color={color}>
        {label}
        <Icon
          type="question-circle"
          theme="twoTone"
          style={{ marginLeft: 3 }}
        />
      </Tag>
    </Tooltip>
  );
}
Example #11
Source File: index.tsx    From gonear-name with The Unlicense 6 votes vote down vote up
Header: FC<{className?: any}> = ({className}) => {
  const { isMarket, isOffer, isRules, isProfile } = useRouteCheck() as CheckState
  const { near, setNear }: { near: INearProps | null, setNear: Dispatch<INearProps | null> } = useContext(NearContext)
  const [open, setOpen] = useOpen()

  return (
    <Container className={className}>
      <MenuButton open={open} onClick={() => setOpen(!open)} />
      <Link to="/"><Brand /></Link>
      <Menu open={open}>
        <MenuItem onClick={() => setOpen(false)} to="/" $active={isMarket}>Market</MenuItem>
        <MenuItem onClick={() => setOpen(false)} to="/offer" $active={isOffer}>Offer</MenuItem>
        {near?.signedIn && <MenuItem onClick={() => setOpen(false)} to="/profile" $active={isProfile}>Profile</MenuItem>}
        <MenuItem onClick={() => setOpen(false)} to="/rules" $active={isRules}>{open ? 'Rules' : 'How it works'}</MenuItem>
      </Menu>
      <Authorize near={near} setNear={setNear} />
      <Line />
    </Container>
  )
}
Example #12
Source File: index.tsx    From ii-admin-base with MIT License 6 votes vote down vote up
HighlightCard: FC<IIHighlightCardProps> = props => {
  const { cardTitle, showHighLightIcon, className, style, children } = props;

  const containerCls = classNames('ii-highlight-card', className);

  const headCls = classNames('ii-highlight-card-head', {
    'ii-highlight-icon': showHighLightIcon,
  });

  return (
    <div className={containerCls} style={style}>
      {cardTitle ? <div className={headCls}>{cardTitle}</div> : null}
      <div>{children}</div>
    </div>
  );
}
Example #13
Source File: back.tsx    From protect-scotland with Apache License 2.0 6 votes vote down vote up
Back: FC<BackProps> = ({
  variant = 'default',
  onPress: onPressProp
}) => {
  const navigation = useNavigation();
  const {t} = useTranslation();

  const onPress = () => navigation.goBack();

  return (
    <TouchableWithoutFeedback
      accessible
      accessibilityRole="button"
      accessibilityHint={t('common:back:hint')}
      accessibilityLabel={t('common:back:label')}
      onPress={onPressProp || onPress}>
      <View style={styles.container}>
        <Image
          source={icons[variant]}
          accessibilityIgnoresInvertColors={false}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}