react-feather#GitHub JavaScript Examples
The following examples show how to use
react-feather#GitHub.
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: Header.js From popper.js.org with MIT License | 6 votes |
|
Header = () => (
<HeaderStyled>
<picture>
<source
srcset={popperLogoOutlined}
media="(prefers-color-scheme: dark)"
/>
<source
srcset={popperLogo}
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
/>
<Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
</picture>
<Slogan>
Tooltip & Popover <br /> Positioning Engine
</Slogan>
<SubSlogan>
Weighs just <strong>3 kB!</strong>
</SubSlogan>
<div
css={css`
margin-top: 30px;
`}
>
<a
css={buttonCss}
href="https://github.com/popperjs/popper-core"
rel="nofollow noreferrer"
>
<GitHub css={iconCss} /> Star on GitHub
</a>
<Link to="/docs/v2/" css={buttonCss}>
<Terminal css={iconCss} />
Documentation
</Link>
</div>
</HeaderStyled>
)
Example #2
| Source File: Social.js From covid19 with MIT License | 6 votes |
|
Social = ({ text }) => (
<section>
<ShareButton href={twitterURL(text, url)} service="Twitter">
<Twitter />
</ShareButton>
<ShareButton href={facebookURL(url)} service="Facebook">
<Facebook />
</ShareButton>
<a href="https://github.com/lachlanjc/covid19">
<GitHub />
</a>
<style jsx>{`
section {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
section :global(a) {
display: inline-block;
text-decoration: none;
padding-left: 0.5rem;
margin-right: 2rem;
color: ${theme.colors.red};
}
`}</style>
</section>
)
Example #3
| Source File: GitHubStars.jsx From vertx-web-site.github.io with Apache License 2.0 | 6 votes |
|
GitHubStars = ({ org, repo, fallbackValue, button }) => {
const url = `https://api.github.com/repos/${org}/${repo}`
const [stars, setStars] = useState(fallbackValue)
useEffect(() => {
async function fetchStars() {
let response = await fetch(url)
let json = await response.json()
setStars(json.stargazers_count)
}
fetchStars()
}, [url])
let label
if (stars !== undefined) {
if (stars >= 1000) {
label = Math.floor(stars / 1000) + "K+ stars"
} else {
label = stars + " stars"
}
}
let icon = <GitHub />
return (
<>
<Head>
<link rel="preload" href={url} as="fetch" crossOrigin="anonymous" />
</Head>
<div className="github-stars">
<a href={`https://github.com/${org}/${repo}`}>
{button ? <Button icon={icon}>{label}</Button> : <><div className="icon">{icon}</div> {label}</>}
</a>
</div>
<style jsx>{styles}</style>
</>
)
}
Example #4
| Source File: Footer.js From webDevsCom with MIT License | 5 votes |
|
Footer = () => {
return (
<footer className='footer'>
<ReactTooltip type='light' />
<p className='has-text-centered is-size-4 has-text-grey-light'>• • •</p>
<div className='column'>
<div className='buttons is-centered'>
<a
href='https://www.facebook.com/binu.kumar.90857'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Facebook ?♂'
>
<Facebook color='blue' className='icon' />
</a>
<a
href='https://www.instagram.com/krbinu42/'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Instagram ?'
>
<Instagram color='#C74B91' className='icon' />
</a>
<a
href='https://github.com/Binu42'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Github ❤️'
>
<GitHub className='icon' />
</a>
<a
href='https://twitter.com/kbinu42'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Twitter ?♂️'
>
<Twitter color='#1DA1F2' className='icon' />
</a>
<a
href='https://www.linkedin.com/in/binukumar/'
target='_blank'
rel='noopener noreferrer'
className='is-hidden-touch button button-special is-rounded box-shadow-lift'
data-tip='connect on Linkedin ?⚖️'
>
<Linkedin color='#0077B5' className='icon' />
</a>
</div>
</div>
{/* <div className='column has-text-centered'>
<p className='subtitle is-7 is-capitalized has-text-danger'>
This Project is just for Learning and teaching purposes.
</p>
</div> */}
<div className='column has-text-centered'>
<p className='menu-label'>
Made with <Heart color='red' fill='red' size='15px' />{' '}
<a
href='https://binu42.netlify.com'
target='_blank'
rel='noopener noreferrer'
>
By Binu Kumar
</a>{' '}
<br />
©{new Date().getFullYear()}
</p>
</div>
</footer>
);
}
Example #5
| Source File: HeroSec.js From webDevsCom with MIT License | 5 votes |
|
HeroSec = () => {
return (
<div style={{ minHeight: "100vh" }}>
<section className="section">
<div className="container">
<div className="column has-text-centered is-hidden-touch">
<p className="title fadeInUp" style={{ animationDelay: "0.25s" }}>
<span style={{ fontSize: "5rem" }}>
Hello Developer, welcome home!
</span>
</p>
<p
className="subtitle is-3 has-text-grey fadeInUp"
style={{ animationDelay: ".5s" }}
>
We have collected over 1000+ free resources to make your
development journey hassle free Enjoy the experience.
</p>
<Contributor />
<div className="column fadeInUp" style={{ animationDelay: "1s" }}>
<a
href="https://github.com/WebDevsCom/webDevsCom"
className="button button-special box-shadow-lift is-large is-rounded"
target="_blank"
rel="noopener noreferrer"
>
<GitHub /> <span>  open sourced on GitHub</span>
</a>
</div>
</div>
<div className="column has-text-centered is-hidden-desktop">
<p
className="title is-2 fadeInUp"
style={{ animationDelay: ".25s" }}
>
Hello Developer, welcome home!
</p>
<p
className="subtitle has-text-grey is-5 fadeInUp"
style={{ animationDelay: ".5s" }}
>
We have collected over 1000+ free resources to make your
development journey hassle free Enjoy the experience.
</p>
<Contributor />
<div className="column fadeInUp" style={{ animationDelay: "1s" }}>
<a
href="https://github.com/WebDevsCom/webDevsCom"
className="button button-special box-shadow-lift is-large is-rounded"
target="_blank"
rel="noopener noreferrer"
>
<GitPullRequest /> <span>  Github</span>
</a>
</div>
</div>
</div>
</section>
</div>
);
}
Example #6
| Source File: Footer.js From covid19india-react with MIT License | 5 votes |
|
function Footer() {
const {t} = useTranslation();
return (
<footer>
<div className="link">
<a
href="https://github.com/covid19india"
target="_blank"
rel="noopener noreferrer"
>
covid19india
</a>
</div>
<h5>{t('We stand with everyone fighting on the frontlines')}</h5>
<div className="links">
<a
href="https://github.com/covid19india/covid19india-react"
className="github"
target="_blank"
rel="noopener noreferrer"
>
<GitHub />
</a>
<a
className="api"
href={API_DOMAIN}
target="_blank"
rel="noopener noreferrer"
>
<Database />
</a>
<a
href="https://t.me/covid19indiaorg"
className="telegram"
target="_blank"
rel="noopener noreferrer"
>
<Send />
</a>
<a
href="https://twitter.com/covid19indiaorg"
target="_blank"
rel="noopener noreferrer"
className="twitter"
>
<Twitter />
</a>
<a
href="https://instagram.com/covid19indiaorg"
target="_blank"
rel="noopener noreferrer"
className="instagram"
>
<Instagram />
</a>
<a
href="mailto:[email protected]"
className="mail"
target="_blank"
rel="noopener noreferrer"
>
<Mail />
</a>
</div>
</footer>
);
}
Example #7
| Source File: Volunteers.js From covid19india-react with MIT License | 5 votes |
|
function Member({className, style, name, bio, link, image, socials = {}}) {
const [loaded, setLoaded] = useState(false);
const socialIcons = useMemo(
() => ({
github: <GitHub size={16} />,
linkedin: <Linkedin size={16} />,
twitter: <Twitter size={16} />,
instagram: <Instagram size={16} />,
}),
[]
);
return (
<animated.div className={classnames('Member', className)} {...{style}}>
{link && <a href={link} target="_blank" rel="noopener noreferrer"></a>}
{!loaded && (
<div className="image">
<ContentLoader
backgroundColor="#888"
foregroundColor="#888"
backgroundOpacity={0.2}
foregroundOpacity={0.4}
>
<rect x="0" y="0" width="256" height="256" />
</ContentLoader>
</div>
)}
<img
className="image"
src={`${VOLUNTEERS_DOMAIN}/images/${image ? image : PLACEHOLDER_IMG}`}
alt={name}
onLoad={setLoaded.bind(this, true)}
style={{display: loaded ? 'block' : 'none'}}
/>
<div className="details">
<h2 className="name">{name}</h2>
<p className="bio">{bio}</p>
<div className="socials">
{Object.entries(socialIcons).map(
([social, icon]) =>
socials[social] && (
<a
key={social}
className={classnames('icon', social)}
href={socials[social]}
target="_blank"
rel="noopener noreferrer"
>
{icon}
</a>
)
)}
</div>
</div>
{link && (
<div className="link-external">
<ExternalLink size={16} />
</div>
)}
</animated.div>
);
}
Example #8
| Source File: Layout.js From hivemind with Apache License 2.0 | 4 votes |
|
Layout = ({ children }) => {
const [isOpen, setOpen] = useState(false)
const [dropdownOpen, setDropdownOpen] = useState(false)
const { pageVars } = useContext(GlobalContext)
const notifyRef = useCallback((node) => {
if (typeof window !== 'undefined') {
if (node) {
window.notify = node.notificationAlert.bind(node)
} else {
window.notify = null
}
}
}, [])
function toggleCollapse() {
setOpen(!isOpen)
}
function toggleDropdown() {
setDropdownOpen(!dropdownOpen)
}
return (
<Container fluid>
<Head>
<script type="text/javascript" src="/js/pace.min.js" async />
<title>{pageVars.title}</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="/img/logo/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/img/logo/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/img/logo/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/img/logo/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/img/logo/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/img/logo/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/img/logo/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/img/logo/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/logo/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/img/logo/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/logo/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/img/logo/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/logo/favicon-16x16.png"
/>
<link rel="manifest" href="/img/logo/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/img/logo/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
</Head>
<Navbar color="inverse" light expand="md" className="border-bottom mb-2">
<Link href="/" passHref>
<ForwardedNavbarBrand className="text-wrap">
<img
src="/img/logo/Logo.svg"
style={{ height: '35px' }}
alt="Logo"
/>
</ForwardedNavbarBrand>
</Link>
<NavbarToggler onClick={toggleCollapse} />
<Collapse isOpen={isOpen} navbar>
<MainNav />
<Nav className="ml-auto" navbar>
<NavItem>
<NavbarText>
<Spinner
type="grow"
color="dark"
id={'loading'}
className={'invisible mx-2'}
/>
</NavbarText>
</NavItem>
<NavItemUser />
<Dropdown
nav
inNavbar
isOpen={dropdownOpen}
toggle={toggleDropdown}
>
<DropdownToggle nav caret>
<HelpCircle /> Help
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<Link href={'/help'} passHref>
<NavLink>
<Info /> User Guide
</NavLink>
</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<NavLink
href={'https://github.com/adityamukho/hivemind/discussions'}
target="_blank"
>
<MessageCircle /> Ask a Question (Hivemind)
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
href={'https://gitter.im/recallgraph/community'}
target="_blank"
>
<MessageCircle /> Ask a Question (RecallGraph)
</NavLink>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
href="https://github.com/adityamukho/hivemind"
target="_blank"
>
<GitHub />
</NavLink>
</NavItem>
<NavItemLogin />
</Nav>
</Collapse>
</Navbar>
<Container fluid>
<NotificationAlert ref={notifyRef} />
<Row>
<Col>{children}</Col>
</Row>
</Container>
</Container>
)
}
