Build A React Carousel Component With Infinite Scroll - justacodingblog (2022)

Build A React Carousel Component With Infinite Scroll - justacodingblog (1)

November 11th, 2021

Code Examples

JavaScript

React

The carousel is a classic piece of functionality. It’s a mechanism that the user can utilize to scroll through slides of content, image-based or otherwise.

Here’s the accompanying infinitely-scrolling React carousel example (accessible directly in JSFiddle).

This carousel example provided is very much a “bare-bones” implementation. I’ve tried to capture the core functionalities in the most simplistic and easily digestible manner. The carousel component is animated, and it gives the impression of having an infinite scroll in either direction.

Let’s break down how the carousel works.

The configuration, an array of slides

As you can see, this particular React carousel example expects a prop called slides – this should be an array of simple JavaScript objects.

These slide objects look like so:

{ title: "Slide #1", content: () => <p>I am the content for the first slide</p>}

As expected, these slide objects define what content the carousel will actually display.

This implementation allows functions and components to be passed in as configuration, meaning the content of the individual slides is flexible and can be easily used for many different purposes (the user isn’t just limited to purely text based slides, for example).

Given an array of slides, we firstly need to indicate a visible slide before we can look at transitioning and animating to other slides in the sequence.

Marking a slide as “visible” or active

Our React carousel component utilizes a piece of state called visibleSlide. The value of visibleSlide is an index that represents the slide in the sequence which should be visible to the user.

(Video) Build A Simple Carousel Component In ReactJS

This defaults to 1 instead of 0 for reasons I’ll go into later on.

const [visibleSlide, setVisibleSlide] = useState(1)

Monitoring the visible slide is the most important aspect of the carousel. Manipulating this value is the crux of the component itself and it’s what allows our carousel to actually do something (ie. scroll, automatically or otherwise).

This is used to determine which slide is the active slide. The active slide is the slide that’s currently visible within the carousel element.

Swapping to a different visible slide is as simple as calling the method returned via the relevant useState hook:

setVisibleSlide(3)

The various modes of the carousel component

This React carousel component example supports two modes, which we’ll refer to as manual mode and automatic mode.

Let’s take a look at the implementation details for each mode.

Manual mode

Manual mode allows the user to scroll through the carousel slides themselves via left and right arrow controls.

Scrolling to the left or right

Scrolling in either direction is as simple as incrementing or decrementing the visibleSlide value stored in state.

const scrollLeft = () => { setVisibleSlide(visibleSlide - 1)}const scrollRight = () => { setVisibleSlide(visibleSlide + 1)}

We don’t need to worry about animations or transitions or anything else at this point. Just know that whatever index we pass to setVisibleSlide — the carousel component will treat this particular slide as the visible one.

(Note: we’ll go over what happens when you scroll out of bounds a bit later on in the article)

So it’s simply a matter of attaching the relevant functionalities to each button:

<a onClick={!leftAndRightDisabled ? scrollLeft : null} href="javascript:;" className={`scrollLeft ${leftAndRightDisabled ? "disabled" : ""}`}> Left</a><a onClick={!leftAndRightDisabled ? scrollRight : null} href="javascript:;" className={`scrollRight ${leftAndRightDisabled ? "disabled" : ""}`}> Right</a>

One function to scroll left on click, and one function to scroll right on click. We’ll go over some of the other elements portrayed in this particular snippet in due course.

Automatic mode

Automatic mode scrolls on it’s own.

The user doesn’t have access to any of the aforementioned controls (the left or right arrows) as we’re hiding them in this scenario. This is just to prevent the user from interfering with the automatic scrolling mechanism. The user can stop and start the carousel via dedicated controls when in this mode, instead, though.

As you may have guessed, actually scrolling to the left or right in automatic mode is, in principle, exactly the same as in manual mode. We just need to increment the visibleSlide value stored in state.

This particular React carousel example only supports automatic scrolling in one direction (left to right) so we’re only incrementing here, but it should be trivial enough to support automatic scrolling in reverse (where we’d decrement visibleSlide, instead).

Starting the carousel

To actual start the carousel and initiate the automatic scrolling, we can make use of setInterval:

const start = () => { intervalId.current = setInterval(() => { setVisibleSlide(prevVisibleSlide => { if (prevVisibleSlide + 1 === stateSlides.length) { return 0 } return prevVisibleSlide + 1 }) }, speed)}

I’m using useRef to store a reference to the interval ID here.

The reason for this is that we don’t want to have to manipulate state to clear this interval (which would stop the carousel). We want this operation to be instant (which setting state may not necessarily be, given it’s asynchronous nature).

So there’s no good reason to store this interval ID in state, and useRef is a better alternative in this scenario.

Stopping the carousel

We also have an accompanying function which is responsible for stopping the scrolling:

(Video) Infinite Scrolling With React - Tutorial

const stop = () => { clearInterval(intervalId.current)}

It’s just a means of calling clearInterval and passing in the relevant interval ID that was set by out start function.

With those functions in place, it’s simply a matter of attaching them to buttons in the UI to allow the user to initiate the relevant functionalities directly:

<a onClick={start} href="javascript:;">Start</a><a onClick={stop} href="javascript:;">Stop</a>

These elements, combined, form the basis of the automatic mode implemented within this carousel example.

What’s prevVisibleSlide used for here?

You may have noticed that the start function refers to the previous visibleSlide value in order to determine the next index to scroll to.

This is a necessity, as setInterval retains only the initial value of visibleSlide once it’s invoked.

This means if we were to increment it directly, without referring to it’s previous value as we are doing, it’ll always be the same value. That’ll be a value of 1 — given the initial value is always 0.

Starting the automatic scroll right away

You may have notice a prop called autoScroll.

This is passed to the React carousel component itself, and it determines if the carousel should auto-scroll immediately or not.

If passed, we don’t supply any start or stop controls to the user. But we make the carousel play automatically right away, instead:

useEffect(() => { // ... if (!!autoScroll) { start() }}, [])

This is handled inside a useEffect hook, with an empty array passed dependency as the second parameter.

This functionality runs once. If the prop has been passed as required – we can initiate the automatic scrolling from here.

Actually animating the transitions

The transitions in this carousel example work in conjunction with the absolute and relative positioning structure that’s been provided:

Build A React Carousel Component With Infinite Scroll - justacodingblog (2)

Position and structure of the carousel elements

There’s a “container” that has relative positioning. The underlying slide container nested within has an absolute positioning.

The slides positioned within this slide container are positioned alongside one another, in a row.

To show the next (or previous) slide in the carousel, it’s simply a means of adjusting the left margin of the slide container. This pushes the next (or previous) slide into the visible viewpoint.

The rest of the slides remain hidden due to overflow: hidden.

The actual animations

It’s as simple as applying a CSS transition class to the relevant element for this:

.transition { transition: ease all 0.5s;}

As outlined above, the fundamental behaviour of this carousel component is controlled by adjusting margins (specifically, the left margin of the relevant element).

With the transition applied, instead of the slides snapping immediately into position — they will instead ease into position. This gives a nice effect that’s standard for these kind of carousel elements.

Adding infinite scroll to the carousel component

As you may have noticed, this carousel has infinite-scrolling functionality.

By this, I mean once the user surpasses the very last slide; they are returned back to the first slide. Likewise once the user navigates left from the starting slide; they’ll be returned to the last slide as expected.

(Video) Build React Image Slider From Scratch Tutorial

This process can repeat itself indefinitely in one direction, without the need to animate back to the starting slide.

The problem with infinite scrolling when paired with animations or transitions

Imagine a carousel that is not animated in terms of one slide transitioning in to another.

In this scenario, without a scrolling animation, infinite scrolling is not an issue.

However, when slides actually scroll from one direction, it’s important to keep the continuity each time. So upon reaching the end of the sequence, it’s not really ideal to animate or skip right back to the start in the opposite direction.

This just looks a bit unsightly and it isn’t the aesthetic we are after.

The solution

To work around this, I decided to add “clone” slides to the sequence, like so:

useEffect(() => { const slidesWithClones = [...slides] slidesWithClones.unshift(slidesWithClones[slidesWithClones.length - 1]) slidesWithClones.push(slidesWithClones[1]) setStateSlides(slidesWithClones) // ...}, [])

So a clone slide is applied to the start of the array (a clone of the last slide) and the end of the array (a clone of the first slide).

Build A React Carousel Component With Infinite Scroll - justacodingblog (3)

The general idea with these clone slides is as follows:

  • the user reaches the end of the sequence
  • they scroll to the right once more
  • they’ll land on a clone slide now, which is a copy of the first slide
  • once the transition is done, disable the transition behaviour entirely and actually jump back to the (actual, real) first slide

So the point here is that we are obscuring the “snap” back to the start of the slider by awaiting the end of the transition on the clone slide, so it’s fully stationary — then setting our margins as required.

Then enabling the transitioning again.

We do the same in the reverse direction, too.

The overall effect of this is that the carousel can be continuously scrolled in either direction without resetting itself. That’s not the actual reality, however, as described above. The carousel is resetting itself — but that behaviour is effectively obscured from the user.

Preventing odd behaviour

I’ve used a boolean called setLeftAndRightDisabled in the component example provided.

const [leftAndRightDisabled, setLeftAndRightDisabled] = useState(false)

When we perform our slide swap functionality, so when navigating from a “clone” to it’s real counterpart — it’s necessary to disable the left and right controls (if in manual mode).

That’s because it’s possible for the user to spam-click the controls at this particular point in time, and this can unfortunately cause a little bit of chaos when executing our clone-specific behaviour.

There may be a better way around this issue, but this is the rudimentary approach I’ve taken for now.

Working with setTimeout and setInterval along with the (asynchronous) nature of setting state within React can often lead to issues and quirks that need to be manually rectified, such as this one.

Adding a slide indicator to assist with navigation

It’s nice to have some kind of indication with regards to how many slides exist within the React carousel.

To handle this, I’ve added what I will call the slide indicator.

It’s simply a series of dots. These dots represent the slides themselves, with the currently active (or visible) slide being indicated amongst these dots.

The functionality is implemented via simple map:

(Video) React Carousel (From Scratch)

<div className="slideIndicator"> {stateSlides.map((slide, index) => { if (index === 0 || index === stateSlides.length - 1) { return null } return <div key={index} onClick={() => setVisibleSlide(index)} className={`dot ${dotIsActive(index) ? "active" : ""}`}> </div> })}</div>

It’s possible to click these dots to scroll directly to the slide represented by that specific dot.

Obscuring the clone slides

Of course, we have 2 more slides than originally passed through to the React carousel component as props.

Specifically, the clone at the beginning and the clone at the end of the array.

We can obscure those slides from being represented via the simple logic as demonstrated in the snippet above.

Then it’s a matter of making sure the correct dot is activated when we would ordinarily activate one of the (now) obscured dots:

const dotIsActive = (index) => { return ( index === visibleSlide || (index === 1 && visibleSlide === stateSlides.length - 1) || (index === stateSlides.length - 2 && visibleSlide === 0) )}

Now the slide indicator looks and works as expected, the user doesn’t see or experience the specially-added clone slides in any way.

Adapting this carousel component example

This type of component can most definitely be adapted into many different forms.

Here are a few possible tweaks and adjustments you could make.

Show multiple slides at once

With some adjustments to the way the viewable window is handled, as well as some of the dimension calculations, it’d be possible to show the active slide in a central position with both slides (to the left and to the right of it) still visible.

In this scenario, it would be nice to fade out the non-active slides.

This is a common pattern used in many carousels, and it’d be fairly straightforward to implement alongside the functionalities provided in this particular example.

Add more configuration and customizability

Of course, there are a lot of different effects that can be applied to elements such as this one.

Why not add in some of these effects and allow them to be controlled via props or a specific config object?

Here are a few examples:

  • Apply an overlay to darken out background content
  • Change the transition animation from sidewards scrolling to something else
  • Optionally disable the animations entirely
  • Supply a mode whereby the carousel doesn’t infinitely loop; but once it reaches the end the “next” arrows disappears and the user must navigate back, instead

In closing

I hope this React carousel component example along with it’s infinite scrolling has been useful for you!

You can find other such examples of simple, reusable components (React and otherwise) in our Code Examples category.

Do check back later for more code examples, new ones are to be added on a regular basis!

Thanks for reading!

Have any questions? Ping me over at @justacodingblog

previous: A Simple React Accordion Component Example

(Video) React & Tailwind CSS Infinite Autoplay Slider - Complete React Course - Day 15

next: Show And Hide Elements And Components In React

← Back to blog

FAQs

How do you get infinite carousel in react? ›

To tell the Carousel component that we want to show an infinite loop, we will need to pass a new props to it. The props name will be infiniteLoop . Next we need to clone the last item to be placed before the first item and clone the first item to be placed after the last item.

How do you implement custom infinite scroll in react? ›

To implement infinite scroll, the first thing we should know is the last element of the current list. For getting it, we can take help from the onScroll method and save our reference in react useRef. Following code will give us an idea regarding implementation of the onScroll method and using ref.

How do you use infinite scroll react? ›

Infinite Scroll is a technique that automatically adds the next page as the user scrolls down through content, more content is loaded. User don't need to wait for pages to preload. So infinite scroll can provide user a better experience.

How do you add infinite scrolls in react JS? ›

Let's just copy that down a couple times so that we have an example of what this is going to look

How do you show multiple items in simple react carousel? ›

To handle multiple item at once, we'll add 1 more props to our Carousel component, which is show prop, this will be used as indication for the Carousel to show how many item at once. So let's add it to our Carousel props. Now we need to use the show prop to adjust the CSS of the Carousel children.

How do I add a horizontal scrollbar in react JS? ›

In project: import React from 'react'; import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu'; const getItems = () => Array(20) . fill(0) . map((_, ind) => ({ id: `element-${ind}` })); function App() { const [items, setItems] = React.

How does infinite scrolling work? ›

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. The success of infinite scrolling on social media sites such as Twitter have made this technique popular, but that doesn't mean you should do it too.

What is useInfiniteQuery? ›

Infinite Scroll with useInfiniteQuery

Instead of the useQuery Hook, we'll use the useInfiniteQuery Hook to load more data onto an existing set of data. There are a few things to note about useInfiniteQuery : data is now an object containing infinite query data. data. pages is an array containing the fetched pages.

How do you implement load more in React? ›

React Js Show Data On Load More Button Click Example
  1. Step 1: Build React Project.
  2. Step 2: Install Bootstrap Module.
  3. Step 3: Make Component File.
  4. Step 4: Install Lodash Library.
  5. Step 5: Implement Load More Logic.
  6. Step 6: Update Global Component.
  7. Step 7: Start Development Server.
25 Sept 2022

How do I add infinite scroll? ›

First, create a new folder called infinite-scroll . Inside that folder, create two subfolders css and js . Second, create the style. css in the css folder and app.

Who invented endless scroll? ›

Aza Raskin is the creator of “infinite scroll”, a feature that has become ubiquitous on sites such as Facebook and Twitter and allows users to continuously move up or down a page, removing any need to press “refresh” or hit a “next page” button.

How do you get the scroll position in react? ›

To get scroll position with React, we can add a scroll listener to window . to create the scrollPosition state with the useState hook. Then we add the handleScroll function that takes the scroll position with the window.

What is lazy loading in react? ›

In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as code splitting and data fetching . Talking about React specifically, it bundles the complete code and deploys all of it at the same time.

How do you use waypoints in react? ›

You can use React Waypoint to receive a callback whenever an image is a certain distance from the bottom of the page. For instance, by specifying bottomOffset='-200px' , then your onEnter callback would be called when the waypoint comes closer than 200 pixels from the bottom edge of the page.

What is react use? ›

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

How do I create a custom carousel in react JS? ›

To create a simple carousel, we would have to write a lot of complicated logic and CSS to display the items.
...
Create the following files:
  1. images. js: to list out all the images we want to display in the slider.
  2. imageSlider. js: to set up our carousel component.
  3. style. css: for writing custom CSS.
27 Mar 2022

What is React multi carousel? ›

react-multi-carousel 👋 Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering).

How do you make a carousel auto slide in React? ›

ReactJS Image Slider Tutorial - (With Auto-slide effect) - YouTube

How do I create a horizontal scrolling container? ›

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

How do I make a div horizontally scrollable? ›

Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

How do you make a horizontal scrollable div in react? ›

To make a horizontally scrollable div we have to write overflow-x: scroll; with white-space: nowrap; ( in the case of text content ) and it will make a horizontally scrollable div.

Is infinite scroll better than pagination? ›

Choosing between pagination and infinite scroll depends on your business and how your users consume content. While pagination works well for end users who have an end destination or desired outcome, infinite scroll is best for users who are looking to explore content, like on a social media site.

Which is better pagination or infinite scroll? ›

Pagination works better on websites where users are looking for specific pieces of content. Whereas infinite scroll is better suited for websites where you want users to discover and explore the content available. Infinite scroll is also much more effective for mobile devices.

Why is infinite scroll so addictive? ›

When we scroll through our feeds switching between content so quickly, the brain gets a hit of dopamine each time, creating a sort of neurological 'high. ' It's that rush that keeps you scrolling through the content. It's the same as any addiction, be it drugs, alcohol, or slot machines.

What is stale time in React query? ›

If the query is stale (which per default is: instantly), you will still get data from the cache, but a background refetch can happen under certain conditions. CacheTime: The duration until inactive queries will be removed from the cache. This defaults to 5 minutes.

What react query solves? ›

React Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.

What is difference between componentDidMount and useEffect? ›

From the previous question, we found out that componentDidMount doesn't have the same behavior with useEffect hook, because componentDidMount invoked synchronously before the browser paints the screen, while useEffect is invoked asynchronously after the browser has already painted the screen.

How do I load a page in React? ›

Add React in One Minute
  1. Step 1: Add a DOM Container to the HTML. First, open the HTML page you want to edit. ...
  2. Step 2: Add the Script Tags. Next, add three <script> tags to the HTML page right before the closing </body> tag: ...
  3. Step 3: Create a React Component. Create a file called like_button.js next to your HTML page.

How do you use infinite scroll in JavaScript? ›

window. innerHeight : Indicates the visible part of the window
  1. window. addEventListener('scroll',()=>{
  2. console. log(window. scrollY) //scrolled from top.
  3. console. log(window. innerHeight) //visible part of screen.
  4. if(window. scrollY + window. innerHeight >=
  5. document. documentElement. scrollHeight){
  6. loadImages();
  7. }

How do you make smooth scroll in react? ›

How To Smooth Scroll in React - Smooth Scrolling Tutorial - YouTube

What is virtual scrolling? ›

Virtual scrolling allows the Grid component to display thousands of records on a single page. You can use this feature as an alternative to paging. Browser Support Notes: The following browsers do not support virtual scrolling because they do not support position: sticky : Android Browser before 5.0.

How was infinite scroll invented? ›

Infinite scrolling is a technique that loads more content as you scroll. It allows you to continue scrolling indefinitely and is sometimes known as endless scrolling. Aza Raskin invented the mechanism whilst working at Humanized, a small user-interface company.

When was endless scroll invented? ›

In 2006, he invented the infinite scroll, the now-ubiquitous feature that seamlessly delivers ever-more content to a passive user. But then something happened that stopped him in his tracks. One of those startups, Massive Health, was designing technology to get people to eat healthier.

How do you stop compulsive scrolling? ›

Stop Scrolling: Here's How To Curb Your Phone Addiction
  1. Turn off notifications. For a start, you should turn off push notifications on social media apps. ...
  2. Set daily limits. ...
  3. Nightly wind down. ...
  4. Delete social media apps. ...
  5. Replace with helpful apps. ...
  6. Take time out.

How do you get the scroll position element? ›

To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.

How do you scroll through a window in React? ›

import * as React from "react"; import { useScrollBy } from "react-use-window-scroll"; const HookExample = () => { const scrollBy = useScrollBy(); return ( <div> {/* Hard scroll down by 200 pixels */} <button onClick={() => scrollBy(200, 0)}>Hard Scroll By 200</button> {/* Smooth scroll down by 200 pixels */} <button ...

How do you scroll to bottom of div in React? ›

To scroll to the bottom of a div in React: Add an element at the bottom of the div . Set a ref on the element at the bottom. When an event occurs, call the scrollIntoView() method on the ref object.

What is lazy loading in React? ›

In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as code splitting and data fetching . Talking about React specifically, it bundles the complete code and deploys all of it at the same time.

How do you get the scroll position in React? ›

To get scroll position with React, we can add a scroll listener to window . to create the scrollPosition state with the useState hook. Then we add the handleScroll function that takes the scroll position with the window.

How do you add pagination in React table? ›

const useTable = (data, page, rowsPerPage) => { // ... }; export default useTable; Then we will have two states, one will be the range of our table that will be the pages and the second will be the slice of the elements of the current page. // @/src/hooks/useTable. js import { useState, useEffect } from "react"; // ...

How do you use waypoints in React? ›

You can use React Waypoint to receive a callback whenever an image is a certain distance from the bottom of the page. For instance, by specifying bottomOffset='-200px' , then your onEnter callback would be called when the waypoint comes closer than 200 pixels from the bottom edge of the page.

Is code splitting and lazy loading same? ›

The answer is easy — lazy loading and code splitting. As the name suggests lazy loading is a process of loading parts (chunks) of your application lazily. In other words — loading them only when we really need them. Code splitting is just a process of splitting the app into this lazily loaded chunks.

What is difference between useMemo and useCallback? ›

useMemo is very similar to useCallback. It accepts a function and a list of dependencies, but the difference between useMemo and useCallback is that useMemo returns the memo-ized value returned by the passed function. It only recalculates the value when one of the dependencies changes.

Why we use suspense in React? ›

Suspense is a feature for managing asynchronous operations in a React app. It lets your components communicate to React that they're waiting for some data. It is important to note that Suspense is not a data fetching library like react-async, nor is it a way to manage state like Redux.

How do you scroll smoothly in React? ›

React Bootstrap 5 Smooth scroll
  1. Custom container. By adding containerRef property you can set container in which you want smooth scroll. ...
  2. Custom offset. By adding offset property you can set custom offset from element. ...
  3. Custom duration. By adding duration property you can set custom duration of smooth scroll. ...
  4. Custom easing.

How do I make my React component scrollable? ›

To make a horizontally scrollable div we have to write overflow-x: scroll; with white-space: nowrap; ( in the case of text content ) and it will make a horizontally scrollable div.

How do you get the scroll position element? ›

To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.

What is controlled pagination? ›

A pagination control consists of the page content and the page navigation areas. The Page content area renders and lays out the content according to the application logic. The Page navigation area contains a prefabricated control to preview a particular part of the content.

What is react use? ›

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

Videos

1. building a ReactJS Infinite scroll datatable from scratch
(devmentorlive)
2. Personal Website with React - Making Image Carousel Change Scroll Bar Color in Dark Mode
(Çelik Köseoğlu)
3. SplideJS - Flexible and Accessible Carousel for Web Designers
(Planet of the Web)
4. Infinite Scrolling with JavaScript
(Florin Pop)
5. ∞ INFINITE SCROLL 📜 : MERN Misc. | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB
(You Suck At Coding)
6. How to make Card Slider in HTML CSS & JavaScript | Owl Carousel
(CodingLab)

Top Articles

You might also like

Latest Posts

Article information

Author: Jamar Nader

Last Updated: 07/22/2022

Views: 5693

Rating: 4.4 / 5 (75 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Jamar Nader

Birthday: 1995-02-28

Address: Apt. 536 6162 Reichel Greens, Port Zackaryside, CT 22682-9804

Phone: +9958384818317

Job: IT Representative

Hobby: Scrapbooking, Hiking, Hunting, Kite flying, Blacksmithing, Video gaming, Foraging

Introduction: My name is Jamar Nader, I am a fine, shiny, colorful, bright, nice, perfect, curious person who loves writing and wants to share my knowledge and understanding with you.