react-icons/fa#FaAngleRight JavaScript Examples

The following examples show how to use react-icons/fa#FaAngleRight. 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: ReviewsPhotoCarousel.jsx    From Etsy-Reviews with MIT License 6 votes vote down vote up
ReviewsPhotoCarousel = (props) => {
  const {
    reviewsForItem, handleModalClick, handleClickIdItem, x, goLeft, goRight,
  } = props;

  return (
    <ReviewsPhotoCarouselContainer x={x} reviewsForItem={reviewsForItem} className="ReviewsPhotoCarouselContainer">
      <div className="reviews-carousel-title">Photos from reviews</div>
      <div className="reviews-carousel">
        {reviewsForItem.map((review) => (
          <div className="reviews-carousel-item" key={review.id} style={{ transform: `translateX(${x}%)` }}>
            <a className="reviews-carousel-pic"  onClick={() => {handleModalClick(); handleClickIdItem(review.id);}} >
              <img className="reviews-carousel-pic" src={review.reviewPic} alt="" />
              <ReviewsModal />
            </a>
          </div>
        ))}
        <button type="button" id="reviews-carousel-btn-left" onClick={goLeft}>
          <FaAngleLeft className="reviews-carousel-btn-arrow-left" />
        </button>
        <button type="button" id="reviews-carousel-btn-right" onClick={() => { goRight(); }}><FaAngleRight className="reviews-carousel-btn-arrow-right" /></button>
      </div>

    </ReviewsPhotoCarouselContainer>
  );
}
Example #2
Source File: Stories.js    From devagram with GNU General Public License v3.0 5 votes vote down vote up
Stories = (props) => {
  const [stories, setStories] = useState([]);
  const storyRef = useRef();
  const [scrollLeft, setScrollLeft] = useState(0);

  useEffect(() => {
    /**
     * Here i am using dummy stories but we need to fetch stories here from Database and add to redux store
     */
    const dummyData = dummyStories;
    setStories(dummyData);
  }, []);

  const onScrollRight = () => {
    storyRef.current.scrollLeft += storyRef.current.offsetWidth;
    setScrollLeft((prev) => prev + storyRef.current.offsetWidth);
  };
  const onScrollLeft = () => {
    storyRef.current.scrollLeft -= storyRef.current.offsetWidth;
    setScrollLeft((prev) => prev - storyRef.current.offsetWidth);
  };
  const checkScroll = () => {
    return (
      scrollLeft.toFixed(0) ===
      (+storyRef.current?.scrollWidth - +storyRef.current?.offsetWidth).toFixed(
        0
      )
    );
  };

  return (
    <div style={{ position: "relative" }}>
      <div ref={storyRef} className={classes.Stories}>
        {stories.map((user) => (
          <Story key={user.userId} story={user.stories} user={user} />
        ))}
      </div>
      <div
        style={{
          display: scrollLeft === 0 ? "none" : "block",
        }}
        className={[classes["Scroll-arrow"], classes["Left-arrow"]].join(" ")}
        onClick={onScrollLeft}
      >
        <FaAngleLeft />
      </div>
      <div
        style={{
          display: checkScroll() ? "none" : "block",
        }}
        className={[classes["Scroll-arrow"], classes["Right-arrow"]].join(" ")}
        onClick={onScrollRight}
      >
        <FaAngleRight />
      </div>
    </div>
  );
}
Example #3
Source File: LayoutModal.jsx    From gatsby-airtable-listing with MIT License 4 votes vote down vote up
LayoutModal = ({ children, closeTo, navigation = {} }) => {
  const { current = -1, items = [] } = navigation
  const previous = items[current - 1] ? items[current - 1] : null
  const next = items[current + 1] ? items[current + 1] : null

  const closeModal = () => {
    navigate(closeTo, { state: { noScroll: true } })
  }

  const goPrevious = () => {
    if (!previous) {
      return
    }
    navigate(previous, {
      state: { navigation: { current: current - 1, items }, modal: true },
    })
  }

  const goNext = () => {
    if (!next) {
      return
    }
    navigate(next, {
      state: { navigation: { current: current + 1, items }, modal: true },
    })
  }

  const keyboardNavigation = (event) => {
    switch (event.keyCode) {
      case 37:
        goPrevious()
        break
      case 39:
        goNext()
        break
      case 27:
        closeModal()
        break
      default:
    }
  }

  useEffect(() => {
    window.addEventListener("keydown", keyboardNavigation)
    return () => {
      window.removeEventListener("keydown", keyboardNavigation)
    }
  })

  return (
    <div className="flex relative h-screen">
      <div className="flex flex-wrap items-end md:items-center justify-center mx-auto w-full max-w-screen-xl">
        <div className="order-3 md:order-first pb-2 w-8 mx-2 md:mx-4">
          {previous && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current - 1, items } }}
              to={previous}
            >
              <FaAngleLeft className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
        <div className="w-full mt-12 md:mt-0 mx-3 md:mx-0 md:flex-1 bg-white dark:bg-gray-900 shadow-lg rounded-md overflow-hidden">
          {children}
        </div>
        <div className="order-last pb-2 w-8 mx-2 md:mx-4">
          {next && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current + 1, items } }}
              to={next}
            >
              <FaAngleRight className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
      </div>
      <button
        className="absolute top-0 right-0 m-3 lg:m-6 focus:outline-none"
        onClick={closeModal}
      >
        <FaTimes className="w-8 h-8 fill-current text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" />
      </button>
    </div>
  )
}