DEV Community: Demaspira Aulia

How to Handle Infinite Loop in React Carousel

Demaspira Aulia — Wed, 13 Jan 2021 11:57:50 +0000

Hi everyone!
This is part 4 of my Simple React Carousel series, it will also be the last part of this series, next I will try to release a package based on this series!

In this last part, I will talk about how to handle infinite loop in Carousel, which mean we can go back to the first item when we click next from the first item.

Prequisites

Check my previous part on this series to see how to create a working Simple React Carousel, or you can also clone the project from previous part from my Github repo.

Handle infinite loop

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. We need to do this so that when the Carousel reach the end, it will still be able to render the first item and after that we move the carousel to the actual first item.

To move the carousel to the actual first or last item, we need to add onTransitionEnd property to our div with carousel-content class. In the onTransitionEnd, we will check disable the animation so that when we move the Carousel to the actual location there is no animation so to the user eyes it doesn't look any different. After disabling the animation, we need to change the currentIndex of the Carousel. After the currentIndex is modified, then we enable the animation again.

index.js



 // ...
 <div
     show={3}
+    infiniteLoop={true}
 >
 // ...

And here is the completed Carousel.js file.

Carousel.js



const Carousel = (props) => {
    const {children, show, infiniteLoop} = props

    const [currentIndex, setCurrentIndex] = useState(infiniteLoop ? show : 0)
    const [length, setLength] = useState(children.length)

    const [isRepeating, setIsRepeating] = useState(infiniteLoop && children.length > show)
    const [transitionEnabled, setTransitionEnabled] = useState(true)

    const [touchPosition, setTouchPosition] = useState(null)

    // Set the length to match current children from props
    useEffect(() => {
        setLength(children.length)
        setIsRepeating(infiniteLoop && children.length > show)
    }, [children, infiniteLoop, show])

    useEffect(() => {
        if (isRepeating) {
            if (currentIndex === show || currentIndex === length) {
                setTransitionEnabled(true)
            }
        }
    }, [currentIndex, isRepeating, show, length])

    const next = () => {
        if (isRepeating || currentIndex < (length - show)) {
            setCurrentIndex(prevState => prevState + 1)
        }
    }

    const prev = () => {
        if (isRepeating || currentIndex > 0) {
            setCurrentIndex(prevState => prevState - 1)
        }
    }

    const handleTouchStart = (e) => {
        const touchDown = e.touches[0].clientX
        setTouchPosition(touchDown)
    }

    const handleTouchMove = (e) => {
        const touchDown = touchPosition

        if(touchDown === null) {
            return
        }

        const currentTouch = e.touches[0].clientX
        const diff = touchDown - currentTouch

        if (diff > 5) {
            next()
        }

        if (diff < -5) {
            prev()
        }

        setTouchPosition(null)
    }

    const handleTransitionEnd = () => {
        if (isRepeating) {
            if (currentIndex === 0) {
                setTransitionEnabled(false)
                setCurrentIndex(length)
            } else if (currentIndex === length + show) {
                setTransitionEnabled(false)
                setCurrentIndex(show)
            }
        }
    }

    const renderExtraPrev = () => {
        let output = []
        for (let index = 0; index < show; index++) {
            output.push(children[length - 1 - index])
        }
        output.reverse()
        return output
    }

    const renderExtraNext = () => {
        let output = []
        for (let index = 0; index < show; index++) {
            output.push(children[index])
        }
        return output
    }

    return (
        <div className="carousel-container">
            <div className="carousel-wrapper">
                {/* You can alwas change the content of the button to other things */}
                {
                    (isRepeating || currentIndex > 0) &&
                    <button onClick={prev} className="left-arrow">
                        &lt;
                    </button>
                }
                <div
                    className="carousel-content-wrapper"
                    onTouchStart={handleTouchStart}
                    onTouchMove={handleTouchMove}
                >
                    <div
                        className={`carousel-content show-${show}`}
                        style={{
                            transform: `translateX(-${currentIndex * (100 / show)}%)`,
                            transition: !transitionEnabled ? 'none' : undefined,
                        }}
                        onTransitionEnd={() => handleTransitionEnd()}
                    >
                        {
                            (length > show && isRepeating) &&
                            renderExtraPrev()
                        }
                        {children}
                        {
                            (length > show && isRepeating) &&
                            renderExtraNext()
                        }
                    </div>
                </div>
                {/* You can alwas change the content of the button to other things */}
                {
                    (isRepeating || currentIndex < (length - show)) &&
                    <button onClick={next} className="right-arrow">
                        &gt;
                    </button>
                }
            </div>
        </div>
    )
}

And that's it! You can check the finished project in my Github.

This is the end of my React Carousel series, I will try to publish a package based on this series in the future.
Follow me to get the latest info!

How to Show Multiple Item in Simple React Carousel

Demaspira Aulia — Tue, 12 Jan 2021 12:40:56 +0000

Hello everyone!
This is part 3 of my React Carousel series. Previously we've created a Simple React Carousel with button and swipe control. This time I want to talk about how to show multiple item on the Carousel at once!

Prequisites

Check my part 1 and 2 of this series to follow a step by step guide to make a simple react carousel and add swipe control, or you can pull directly from my Github repo.

Show multiple item

Previously we can show only 1 item at a time, but there are a lot of use case where you might want to show more than 1 item. For example is when you want to display multiple product that have smaller images compared to the viewport.

Add more images

First of, I'll add more images to the Carousel, and I also wrap it in a div element so I can add padding between images.

App.js

 //...
- <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
+ <div>
+     <div style={{padding: 8}}>
+         <img src="https://via.placeholder.com/300x300" alt="placeholder" style={{width: '100%'}} />
+     </div>
+ </div>
 //...

Show multiple item

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.

Carousel.js

 //...
- const {children} = props
+ const {children, show} = props
 //...

Now we need to use the show prop to adjust the CSS of the Carousel children. First we need to modify the div element that have carousel-content class.

Carousel.js

 //...
 <div
-     className="carousel-content"
-     style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+     className={`carousel-content show-${show}`}
+     style={{ transform: `translateX(-${currentIndex * (100 / show)}%)` }}
 >
     {children}
 </div>
 //...

And then we also need to modify the CSS. I'm only showing 3 type which the Carousel can show 2, 3, and 4 item at once.

carousel.css

/* ... */
.carousel-content.show-2 > * {
    width: 50%;
}

.carousel-content.show-3 > * {
    width: calc(100% / 3);
}

.carousel-content.show-4 > * {
    width: calc(100% / 4);
}
/* ... */

And then we can pass the show props to the Carousel component in our App.js file.

App.js

 // ...
- <Carousel>
+ <Carousel
+     show={3}
+ >
 // ...

Now we can already see that our Carousel displayed 3 item instead of 1.

BUT, as you can see there is stil a problem when you press the next button, the Carousel didn't show the item correctly or to be more precise it continue to scroll even after reaching the last item.

To fix this issue, we need to change the condition on when the user can press the button and when the button is shown.

Properly handle next button

We need to change some values so the Carousel function act propertly.

Carousel.js

 // ...
 const next = () => {
-     if (currentIndex < (length - 1)) {
+     if (currentIndex < (length - show)) {
         setCurrentIndex(prevState => prevState + 1)
     }
 }
 // ...
 {
-     currentIndex < (length - 1) &&
+     currentIndex < (length - show) &&
     <button onClick={next} className="right-arrow">
         &gt;
     </button>
 // ...

And that's it!
You can check the final full code on my Github.

Next.js + Typescript + tailwindcss Boilerplate

Demaspira Aulia — Fri, 08 Jan 2021 10:08:54 +0000

React.js is a very popular library for building user interfaces (some might call it frontend framework). React create single-page-applications app by default, and for those people who wanted a server-side rendered website might need to do some extra steps which I personally don't think is beginner friendly.

Here comes Next.js 🎉

When React is a single-page-applications app by default, Next.js provide hybrid static & server side rendering from the get go! It will save you a lot of time and hassle to setup a server side rendering on React.

Typescipt

The next thing to ease your development flow is to use Typescript. It's a superset of the Javascript language and provides optional typing which will make your code easier to read and debug.

tailwindcss

Tailwindcss is a utility-first CSS framework that can also be composed to build any design. In my opinion it really provide an easier way to style your component.

TL;DR

You can check for the finished boilerplate on my Github bellow.

rakumairu / next-ts-tailwindcss

A Next.js + Typescript + tailwindcss boilerplate

Next JS Boilerplate

This is a boilerplate for Next JS with Tailwindcss using Typescript.

Prequisites

You will need Node.js and NPM to use this project.

You windows user, you can check for the installation file here.

And for linux user, you can check for the installation file here or search for your spesific distro in the web.

Getting Started

First, install all required dependecies:

npm install

and then, run the development server:

npm run dev

Open http://localhost:3000 with your browser.

Developing

You can start developing by editing the index.tsx in pages folder (pages/index.tsx).

Build and Serve

You can build and serve the project for production by using:

npm run build
npm run start

Learn More

You can learn more about Next.js, and Tailwindcss here:

View on GitHub

If you want to do it from scratch, then let's do it!

Create new project

You need to have Node.js installed, if you already installed Node.js then let's create a new Next.js project with their provided typescript example.

npx create-next-app --example with-typescript my-app

By using above command, it will automatically setup typescript for us. You can see other examples here

After that you need to open the project folder with you IDE of choice, I'm using VS Code.

Create _app.tsx file

_app.tsx file is the root of Next.js app, it doesn't come by default if we are using typescript example from Next.js. Therefore we'll need to add it ourself. Create file called _app.tsx inside pages folder

/pages/_app.tsx

// eslint-disable-next-line
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

This code is grabbed from the default Next.js app template.

Integrate tailwindcss

To integrate tailwindcss to our project, we need to install tailwindcss, postcss and autoprefixer.

Install required packages

npm i tailwindcss@latest

Create configuration file

After that we'll create tailwindcss' configuration file by running this command. It will create two files in your root project directory called postcss.config.js and tailwind.config.js.

npx tailwindcss init -p

I'll talk about the configuration files more later.

Include tailwind in your CSS

There are two ways that you can do this. Either by importing tailwindcss/tailwind.css directly to your _app.tsx or you can create a styles folder and create a css file inside that folder and import the tailwindcss inside the CSS then import the CSS file to _app.tsx.

I personally prefer the second option because it will give more flexibility for the future when you want to include more CSS files.

/styles/styles.css

/* @tailwind is a syntax from tailwindcss */
@tailwind base;
@tailwind components;
@tailwind utilities;

/pages/_app.tsx

import '../styles/styles.css'
// or
import 'tailwindcss/tailwind.css' // if you want to use the first option insted
// ...

After that, you'll be able to use tailwind classes in your project! But before that, let's setup 1 more thing that will improve your production build.

Remove unused CSS

By default all of tailwind's CSS will be included on your build, of course you don't want that, it will only add more to your build size. Tailwind comes with an option to purge all unused CSS classes in your projects, tailwind will check for your file and determine which class is used and which not.

To configure the options let's open tailwnd.config.js and look for purge property, it's usually at the top, if there is none, you can add the property yourself.
On the purge property, add your files path that uses tailwindcss' classes.

tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.tsx',
        // add more paths
    ],
    // ...
}

And we are done!

You can use this boilerplate to start a new Next.js project or implement it on your current project by following the step by step guide.

There are more property in tailwind.config.js and I will cover it on my future articles!

How to Handle Swipe Event on React Carousel

Demaspira Aulia — Mon, 04 Jan 2021 13:04:57 +0000

Previously we've created a Simple Carousel on React with a simple button to navigate to previous and next slide.

Now we will add a simple swipe event for touchscreen devices, this is particularly handy for mobile devices like smartphone to make it easier to navigate with 1 finger.

Prequisites

Check my part 1 of this series to follow a step by step guide to make a simple react carousel, or you can pull directly from my github repo.

Handle Swipe Event

In Javascript you can add a swipe event handler using onTouchStart, onTouchMove, and onTouchEnd listener, we will only be using onTouchStart and onTouchMove for now.

onTouchStart

onTouchStart is an event listener that will trigger a touchstart event. In this application we will use onTouchStart to record where the user first touch the screen, this value will be used to measure if the user is just tapping the screen or actually want to initiate a swipe motion.

Carousel.js - add handler for onTouchStart



// ...
const [touchPosition, setTouchPosition] = useState(null)
// ...
const handleTouchStart = (e) => {
    const touchDown = e.touches[0].clientX
    setTouchPosition(touchDown)
}
//...

Carousel.js - bind handleTouchStart to onTouchStart listener



  ...
- <div className="carousel-content-wrapper">
+ <div
+    className="carousel-content-wrapper"
+    onTouchStart={handleTouchStart}
+ >
  ...

Now every time the user touch the screen inside the Carousel Content Wrapper it will save the position to touchPosition state.

onTouchMove

onTouchMove is an event listener that will trigger a touchmove event every time the user move their finger on the screen, it continuously check for current position of user's finger.

So what is the point for using this event listener you might say? By knowing the initial position of the user's finger and current position of user's finger we can measure the movement speed of user's finger, then we can determine if the user is currently swiping or not, and which direction of the swipe it is.

To determine the direction of the swipe, we will need a minimum speed of the finger's movement. In my experience, 5 and -5 suits my application best (negative value means the user swipe to the right), you may need to change the value around to suit your application best.

Carousel.js - add handler for onTouchMove



// ...
const handleTouchMove = (e) => {
    const touchDown = touchPosition

    if(touchDown === null) {
        return
    }

    const currentTouch = e.touches[0].clientX
    const diff = touchDown - currentTouch

    if (diff > 5) {
        next()
    }

    if (diff < -5) {
        prev()
    }

    setTouchPosition(null)
}
// ...

Carousel.js - bind handleTouchMove to onTouchMove listener



  ...
  <div
     className="carousel-content-wrapper"
     onTouchStart={handleTouchStart}
+    onTouchMove={handleTouchMove}
  >
  ...

And we are done!

We've added swipe listener to handle navigating to previous and next slide. One more step that you might want to do is hide the control button on touchscreen devices, there are use cases where we still want to display the button, that's why add this as and extra step.

Hide Control Button on Touchscreen Device

To detect if the device utilize touchscreen or not using only css, you can read this article by ferie that explains the css selector that able to detect touchscreen and pointer.

We basically want to add display: none; to .left-arrow and .right-arrow class.

Carousel.css



/* ... */
@media (hover: none) and (pointer: coarse) {
    .left-arrow, .right-arrow {
        display: none;
    }
}
/* ... */

And that's it!
You can check the final full code on my Github.

If you have any suggestions on how to handle swipe event better, you can tell me down on the comments! I would love to hear your ideas.

The next post will be about showing multiple item at once in the Carousel.

How to Make a Simple React Carousel

Demaspira Aulia — Fri, 01 Jan 2021 06:19:00 +0000

Carousel is commonly used in any websites that want to present key point of their products using images, but carousel can not only contain images, but can also contain cards with any content.

To implement carousel people usually use packages like react-responsive-carousel, pure-react-carousel. BUT what if you don't want to add more packages to your application?

Then let's make a simple one!

In this article I'll guide you through how to make a simple react carousel, of course you can adjust it to your needs. I'll also add a link to my finished projects on GitHub.

Prequisites

If you already have a project ready, skip this step.

You need to have Node.js installed, if you already installed Node.js let's create a new React app.



npx create-react-app my-app
cd my-app
npm run start

After that you need to open the project folder with you IDE of choice, I'm using VS Code.

Create new component

Create a new folder called Carousel in your components folder (I usually put it in src/components/Carousel).

Create a new file called Carousel.js and open it.

After that let's start with the basic component file first, copy this code to your file.

Carousel.js



import React from 'react'


const Carousel = () => {
    return (
        <div>

        </div>
    )
}

export default Carousel

Add this component to your page

After we create the component, we need to import it on the page that we'll be using it, for demonstration purpose I'll put it on my App.js.

App.js



import Carousel from "./components/Carousel/Carousel"

const App = () => {
    return (
        <div>
            <Carousel>

            </Carousel>
        </div>
    )
}

export default App

Now we can see the changes we made on the Carousel component.

Creating the carousel

Let's go back to Carousel.js file and add more HTML and some styling to it.

Carousel.js



import React from 'react'
import './carousel.css' //will be added later

const Carousel = (props) => {
    const {children} = props

    return (
        <div className="carousel-container">
            <div className="carousel-wrapper">
                <div className="carousel-content-wrapper">
                    <div className="carousel-content">
                        {children}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Carousel

We are adding a prop to the component called children which is the content that will be displayed on the Carousel.
The next step is to create a css file that will be used to style the Carousel component. Let's create a file called carousel.css in the same directory as Carousel.js.

carousel.css



.carousel-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

.carousel-content-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-content {
    display: flex;
    transition: all 250ms linear;
    -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* hide scrollbar in Firefox */
}

/* hide scrollbar in webkit browser */
.carousel-content::-webkit-scrollbar, .carousel-content::-webkit-scrollbar {
    display: none;
}

.carousel-content > * {
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

Next let's add the content to the Carousel. I'll be using placeholder image provided from placeholder.com.

App.js



// ...
<Carousel>
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
</Carousel>
// ...

For demonstration purposes I'm adding some styling to the parent div on App.js.

App.js



// ...
<div style={{ maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto', marginTop: 64 }}>
    { /*...*/ }
</div>
// ...

The results should look like this. As you can see there is only 1 image visible and it's not scrollable.

Adding control (Layout)

The next step is to add control so the user can interact with it. We'll only add previous and next button for now. I'll talk more about other control on my next posts.

Carousel.js



// ...
<div className="carousel-wrapper">
    {/* You can alwas change the content of the button to other things */}
    <button className="left-arrow">
        &lt;
    </button>
    <div className="carousel-content-wrapper">
        { /*...*/ }
    </div>
    {/* You can alwas change the content of the button to other things */}
    <button className="right-arrow">
        &gt;
    </button>
</div>
// ...

carousel.css



/* ... */
.left-arrow, .right-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: white;
    border: 1px solid #ddd;
}

.left-arrow {
    left: 24px;
}

.right-arrow {
    right: 24px;
}
/* ... */

We've finished the basic layout for the Carousel control. Next we need to add the javascript to handle when the button get clicked and when to hide the button.

Adding control (Functionality)

For the Carousel control to be usable, we need to defined a state for the current active index (currentIndex) and the total item that passed to the Carousel (length).

Carousel.js



// ...
const [currentIndex, setCurrentIndex] = useState(0)
const [length, setLength] = useState(children.length)

// Set the length to match current children from props
useEffect(() => {
    setLength(children.length)
}, [children])
// ...

After that let's add a transform style to the carousel-content, this is the style property that will handle the scrolling for the Carousel. This property will be controlled by the currentIndex state.

Carousel.js



// ...
<div className="carousel-content-wrapper">
    <div
        className="carousel-content"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
    >
        {children}
    </div>
</div>
// ...

Next we will add a function to handle when the control button is clicked.

Carousel.js



// ...
const next = () => {
    if (currentIndex < (length - 1)) {
        setCurrentIndex(prevState => prevState + 1)
    }
}

const prev = () => {
    if (currentIndex > 0) {
        setCurrentIndex(prevState => prevState - 1)
    }
}
// ...

Let's bind the function to onClick listener on both of the button.

Carousel.js



// ...
<button onClick={prev} className="left-arrow">
    &lt;
</button>
// ...
<button onClick={next} className="right-arrow">
    &gt;
</button>
// ...

And... it works!

Hide the control button

Okay, this is the final thing that need to be done, which is add a condition to hide the control button when not needed (e.g. previous button when it currently on the first slide, next button when it currently on the last slide)

Carousel.js



// ...

{

    currentIndex > 0 &&

    <button onClick={prev} className="left-arrow">

        &lt;

    </button>

}

// ...

{

    currentIndex < (length - 1) &&

    <button onClick={next} className="right-arrow">

        &gt;

    </button>

}

// ...

And we are done!

We've finished creating a simple Carousel. You can check the final full code on my Github.

I hope this posts works for you!
Thank you!