react-feather#ArrowUpCircle JavaScript Examples

The following examples show how to use react-feather#ArrowUpCircle. 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: Hero.jsx    From vertx-web-site.github.io with Apache License 2.0 6 votes vote down vote up 
Hero = ({ gitHubStarsFallbackValue }) => (
  <section className="hero">
    <div className="hero-background" />
    <div className="hero-main container">
      <div className="hero-left">
        <div className="hero-slogan">
          <span className="hero-product-name">Eclipse Vert.x<span className="hero-product-name-trademark">&trade;</span></span> Reactive <span className="hero-slogan-second-line">applications on the JVM</span>
        </div>
        <div className="hero-buttons">
          <Link href="/get-started/">
            <a><Button primary icon={<FastForward />}>Get started with v{latestRelease.version}</Button></a>
          </Link>
          <GitHubStars org="eclipse-vertx" repo="vert.x" button fallbackValue={gitHubStarsFallbackValue} />
        </div>
        <div className="hero-buttons hero-buttons-second">
          <Link href="/blog/from-vert-x-3-to-vert-x-4/">
            <a><Button primary icon={<ArrowUpCircle />}> Migrate from Vert.x 3</Button></a>
          </Link>
        </div>
      </div>
      <div className="hero-right">
        <MainCodeExamples />
      </div>
    </div>
    <style jsx>{styles}</style>
  </section>
)
Example #2
Source File: ScrollToTopBtn.js    From webDevsCom with MIT License 5 votes vote down vote up 
ScrollToTopBtn = () => {
  let scrolling = false;
  window.onscroll = function () {
    scrolling = true;
  };

  setInterval(() => {
    const topBtn = document.getElementById('topBtn');
    const navbar = document.getElementById('navbar');
    if (scrolling && topBtn) {
      if (window.pageYOffset > 20) {
        topBtn.style.display = 'block';
        navbar.classList.add('box-shadow');
        navbar.classList.remove('is-light');
        navbar.classList.add('is-white');
      } else {
        topBtn.style.display = 'none';
        navbar.classList.remove('box-shadow');
        navbar.classList.add('is-light');
        navbar.classList.remove('is-white');
      }
      scrolling = false;
    }
  });

  // When the user clicks on the button, scroll to the top of the document
  function topFunction() {
    document.body.scrollTo({ top: 0, behavior: 'smooth' }); // For Safari
    document.documentElement.scrollTo({ top: 0, behavior: 'smooth' }); // For Chrome, Firefox, IE and Opera
  }
  return (
    <>
      <ReactTooltip type='light' />
      <div
        id='topBtn'
        className='button button-special is-rounded box-shadow-lift'
        style={{ cursor: 'pointer' }}
        onClick={topFunction}
        data-tip='Scroll back to top'
      >
        <ArrowUpCircle color='blue' className='icon' />
      </div>
    </>
  );
}