react-icons/fa#FaArrowLeft JavaScript Examples
The following examples show how to use
react-icons/fa#FaArrowLeft.
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: Toolbar.js From dm2 with Apache License 2.0 | 6 votes |
|
History = observer(({ history, children }) => {
const [canGoBack, setGoBack] = React.useState(false);
const [canGoForward, setGoForward] = React.useState(false);
const [renderable, setRenderable] = React.useState(false);
React.useEffect(() => {
if (history) {
history.onChange(() => {
setGoBack(history.canGoBack);
setGoForward(history.canGoForward);
});
setRenderable(true);
}
}, [history]);
return renderable ? (
<React.Fragment>
<HistoryButton
disabled={!canGoBack}
onClick={() => history.goBackward()}
icon={<Icon icon={FaArrowLeft} />}
/>
{children}
<HistoryButton
disabled={!canGoForward}
onClick={() => history.goForward()}
icon={<Icon icon={FaArrowRight} />}
/>
</React.Fragment>
) : (
children
);
})
Example #2
| Source File: Projects.js From Winter-of-Code-2.0-frontend with MIT License | 4 votes |
|
Projects = () => {
let [proj_type, setproj_type] = useState("all");
let [proj_org, setproj_org] = useState("all");
const [empty, setEmpty] = useState(false);
const handleChange = (e) => {
let empty = true
for(let i=0; i<SlideData.length; i++)
{
if (SlideData[i].tags.includes(e.target.value) && SlideData[i].org_tag.includes(proj_org))
{
empty = false;
break;
}
}
setEmpty(empty);
setproj_type(e.target.value);
};
const handleOrg = (e) => {
let empty = true
for(let i=0; i<SlideData.length; i++)
{
if (SlideData[i].tags.includes(proj_type) && SlideData[i].org_tag.includes(e.target.value))
{
empty = false;
break;
}
}
setEmpty(empty);
setproj_org(e.target.value);
};
useEffect(() => {
const proj_form = document.querySelectorAll(".main_item");
proj_form.forEach((item) => {
item.addEventListener("click", () => {
item.children[1].classList.toggle("proj-active");
item.children[1].children[2].classList.toggle("ideas-active");
item.children[0].classList.toggle("proj-active-left");
item.children[0].children[0].children[0].children[0].classList.toggle('idea-hide')
item.children[0].classList.toggle('back-img');
});
});
}, []);
const SlidingDiv = useRef(null);
const calculatePoints = () => {
var x = window.screen.width;
if (x > 905) {
return 750;
} else if (x > 875) {
return 500;
} else if (x > 600) {
return 250;
} else {
return 150;
}
}
const slideLeft = () => {
SlidingDiv.current.scrollLeft -= calculatePoints();
};
const slideRight = () => {
SlidingDiv.current.scrollLeft += calculatePoints();
};
return (
<div className="projects">
<NavBar navLinkColor="white" />
<div className="proj_vid">
<video autoPlay loop muted>
<source src={proj_video} type="video/mp4" />
</video>
</div>
<div className="filter_option">
<h3>Filter out by Categories</h3>
<form id="proj_form">
<select className="proj_slt" onChange={handleChange}>
<option value="all">All Categories</option>
<option value="web">Web Development</option>
<option value="app">App Development</option>
<option value="ml">Machine Learning</option>
<option value="cloud">Cloud</option>
<option value="doc">Documentation</option>
<option value="compiler">Compiler</option>
<option value="py">Python</option>
</select>
</form>
<form id="proj_form">
<select className="proj_slt" onChange={handleOrg}>
<option value="all">All organizations</option>
<option value="mojo">Mojo Global</option>
<option value="llvm">LLVM</option>
<option value="geeta">The Gita Initiative</option>
<option value="autodl">Auto DL</option>
<option value="hoppscotch">Hoppscotch</option>
<option value="jina">Jina AI</option>
<option value="edualgo">Edualgo Academy</option>
<option value="skit">Skit AI</option>
<option value="asyn">AsyncAPI</option>
<option value="codedigger">CodeDigger</option>
<option value="gdsc">GDSC</option>
</select>
</form>
</div>
{!empty?
<>
<div className="Container-arrows">
<div className="Arrow1" onClick={slideLeft}>
<FaArrowLeft />
</div>
<div className="Arrow2" onClick={slideRight}>
<FaArrowRight />
</div>
</div>
<div ref={SlidingDiv} className="proj_slides">
{SlideData.map((slide, idx) => {
if (slide.tags.includes(proj_type) && slide.org_tag.includes(proj_org)) {
return <ProjectCard key={idx} data={slide}/>;
} else {
return null;
}
})}
</div>
</>
:<div className="empty_text">
<h1>No Result Found :(</h1>
</div>}
</div>
);
}
Example #3
| Source File: Testimonials.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Testimonials() {
const { theme } = useContext(ThemeContext);
const sliderRef = useRef();
const settings = {
dots: true,
adaptiveHeight: true,
infinite: true,
speed: 800,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
margin: 3,
loop: true,
autoplaySpeed: 3000,
draggable: true,
swipeToSlide: true,
swipe: true,
};
const gotoNext = () => {
sliderRef.current.slickNext();
};
const gotoPrev = () => {
sliderRef.current.slickPrev();
};
return (
<>
{testimonialsData.length > 0 && (
<div
className='testimonials'
style={{ backgroundColor: theme.primary }}
>
<div className='testimonials--header'>
<h1 style={{ color: theme.secondary }}>Testimonials</h1>
</div>
<div className='testimonials--body'>
<FaQuoteLeft
className='quote'
style={{ color: theme.secondary }}
/>
<div
className='testimonials--slider'
style={{ backgroundColor: theme.primary }}
>
<Slider {...settings} ref={sliderRef}>
{testimonialsData.map((test) => (
<div
className='single--testimony'
key={test.id}
>
<div className='testimonials--container'>
<div
className='review--img'
style={{
backgroundColor:
theme.secondary,
}}
>
<img
src={test.image}
alt={test.name}
/>
</div>
<div
className='review--content'
style={{
backgroundColor:
theme.secondary,
color: theme.tertiary,
}}
>
<p>{test.text}</p>
<h1>{test.name}</h1>
<h4>{test.title}</h4>
</div>
</div>
</div>
))}
</Slider>
<button
className='prevBtn'
onClick={gotoPrev}
style={{ backgroundColor: theme.secondary }}
>
<FaArrowLeft
style={{ color: theme.primary }}
aria-label='Previous testimonial'
/>
</button>
<button
className='nextBtn'
onClick={gotoNext}
style={{ backgroundColor: theme.secondary }}
>
<FaArrowRight
style={{ color: theme.primary }}
aria-label='Next testimonial'
/>
</button>
</div>
</div>
</div>
)}
</>
);
}
Example #4
| Source File: Pagination.jsx From Etsy-Reviews with MIT License | 4 votes |
|
Pagination = (props) => {
const { reviewsPerPage, totalReviews, paginate, currentPage } = props;
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalReviews / reviewsPerPage); i += 1) {
pageNumbers.push(i);
}
const previous = currentPage - 1;
const next = currentPage + 1;
const firstPage = 1;
const secondPage = 2;
const lastPage = pageNumbers.length;
if (currentPage === 1) {
return (
<PaginationContainer className="PaginationContainer">
<ul className="reviews-pagination">
<li className="reviews-page-item">
<button type="button" className="reviews-page-link"><FaArrowLeft /></button>
</li>
<li className="reviews-page-item">
<button type="button" className="reviews-page-link-current">1</button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(secondPage)} className="reviews-page-link">2</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(lastPage)} className="reviews-page-link">{lastPage}</button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(next)} className="reviews-page-link"><FaArrowRight /></button>
</li>
</ul>
</PaginationContainer>
);
}
if (currentPage === 2) {
return (
<PaginationContainer className="PaginationContainer">
<ul className="reviews-pagination">
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(firstPage)} className="reviews-page-link"><FaArrowLeft /></button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(firstPage)} className="reviews-page-link">1</button>
</li>
<li className="reviews-page-item">
<button type="button" className="reviews-page-link-current">2</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(lastPage)} className="reviews-page-link">{lastPage}</button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(next)} className="reviews-page-link"><FaArrowRight /></button>
</li>
</ul>
</PaginationContainer>
);
}
if (currentPage === lastPage - 1) {
return (
<PaginationContainer className="PaginationContainer">
<ul className="reviews-pagination">
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(previous)} className="reviews-page-link"><FaArrowLeft /></button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(firstPage)} className="reviews-page-link">1</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button type="button" className="reviews-page-link-current">{currentPage}</button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(lastPage)} className="reviews-page-link">{lastPage}</button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(lastPage)} className="reviews-page-link"><FaArrowRight /></button>
</li>
</ul>
</PaginationContainer>
);
}
if (currentPage === lastPage) {
return (
<PaginationContainer className="PaginationContainer">
<ul className="reviews-pagination">
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(previous)} className="reviews-page-link"><FaArrowLeft /></button>
</li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(firstPage)} className="reviews-page-link">1</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button type="button" onClick={() => paginate(lastPage - 1)} className="reviews-page-link">{currentPage - 1}</button>
</li>
<li className="reviews-page-item">
<button type="button" className="reviews-page-link-current">{lastPage}</button>
</li>
<li className="reviews-page-item">
<button type="button" className="reviews-page-link"><FaArrowRight /></button>
</li>
</ul>
</PaginationContainer>
);
}
return (
<PaginationContainer className="PaginationContainer">
<ul className="reviews-pagination">
<li className="reviews-page-item">
<button className="reviews-page-link" type="button" onClick={() => paginate(previous)}><FaArrowLeft /></button>
</li>
<li className="reviews-page-item">
<button className="reviews-page-link" type="button" onClick={() => paginate(firstPage)}>1</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button className="reviews-page-link-current" type="button">{currentPage}</button>
</li>
<li className="reviews-page-period">... </li>
<li className="reviews-page-item">
<button className="reviews-page-link" type="button" onClick={() => paginate(lastPage)}>{lastPage}</button>
</li>
<li className="reviews-page-item">
<button className="reviews-page-link" type="button" onClick={() => paginate(next)} ><FaArrowRight /></button>
</li>
</ul>
</PaginationContainer>
);
}
