In this tutorial, we will build a Fullscreen Slider component with React Hooks. And to do that, we will create a custom hook to handle all the logic, then use it as a helper method to display the slides.

So, let’s start by planning how our app will look like.

Plan our app

To be able to follow along, you have to create a brand new React app by running the following command on your terminal:

npx create-react-app react-fullscreen-slider

Next, structure your project as follow:

├── App.js
├── App.test.js
├── components
|  └── Slider.js
├── hooks
|  └── useSlider.js
├── images.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

As you can see, the folder structure is very simple. We have a components folder which holds a file named Slider.js, and another folder hooks which keeps as you might guess the custom hook useSlider, and an images.js file which contain the images to show on the slider.

Now, let’s add some lines of code into these files.

• images.js

export default [
  {
    src: "https://drive.google.com/uc?id=1_oA9Sx4D4DhFrYBFQdL0I1CUIz_LhQue",
    text: "Duis aute irure dolor in reprehenderit in voluptate velit esse",
  },
  {
    src: "https://drive.google.com/uc?id=1rJFs-8So16UCiDag__hG4yyf_RnC08Fa",
    text: "Consectetur adipisicing elit cillum dolore eu fugiat nulla",
  },
  {
    src: "https://drive.google.com/uc?id=1HO2AGjd_1yyYI4pYTTBmGXBaWHoGSqCl",
    text: "Asperiores ex animi explicabo cillum dolore eu fugiat nulla",
  },
]

As I said earlier, this file holds the images. And each object has an image and a description. By the way, you can use a different approach to declare your images, it’s totally up to you.

We have now the data to show, it’s time to build the custom hook to handle the logic of the slider.

Let’s do that

#react hooks #react