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