DEV Community: damilola jerugba

Create infinite auto-scroll animation with pure CSS

damilola jerugba — Wed, 30 Mar 2022 07:50:24 +0000

This guide is to help you understand the concept of how Infinite auto-scroll animations you see on websites like JamStack work, and how to implement them with just CSS!.

🤨 What exactly is this animation?

When you open some websites like JamStack, you'll see an animation that shows the frameworks compatible with the JamStack, also on some other websites they use this cool animation to show customer reviews, sponsors, testimonials, etc.

Concept behind it? 💻

To understand how this animation works let's break it down a little, it simply involves animating an element across the screen. To achieve this we'll need its parent element to have an overflow: hidden, so as the element animates out, it remains hidden.

Structuring animation elements 🏛

We make the parent element position: relative with a discrete width like width: 100vw, and the child element position: absolute with width: inherit because we'll be animating it with the CSS left property. The animation will simply involve moving the element from left: 0% to left: -100%, this will animate the entire element away from the viewport.



.scroll-parent {
  position: relative;
  width: 100vw;
  height: 20rem;
  overflow-x: hidden;
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: primary 3s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

This gives us..

Not looking infinite is it 😬? to make it seem infinite we add a duplicate of the child element right next to the initial child element, making it move from left: 100% to left: 0%.
We'll create another keyframe for this second child element, calling it secondary, then we'll create classes for our keyframes.



.primary {
  animation: primary 3s linear infinite;
}

.secondary {
  animation: secondary 3s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

We then structure our HTML code as follows.



<div class="scroll-parent">
    <div class="scroll-element primary">
     ...
    </div>
    <div class="scroll-element secondary">
     ...
    </div>
</div>

And thats it!

How does it work? 🤔

We are simply animating two similar elements across the screen, the reason why we are using two is that as one leaves the other will fill in the gap, since the two elements are identical with the same width and animation-duration, when the first element, for example, leaves with left: -20% the second element enters in with left: 80%.

Notice the use of infinite, this is to ensure that the animation is looped over, once the animation finishes the illusion is created by replacing the second element with the first element and since they are exactly the same it looks like the animation moves towards the left direction infinitely.

Thank you for reading 🙏🏾, If you have any questions, additions, or subtractions please comment below.

The full source code is linked below 👇👇

damiisdandy / css-animation-auto-scroll

infinte auto scroll animation with pure CSS

Custom React useFetch() hook for data fetching with revalidation

damilola jerugba — Mon, 27 Dec 2021 08:55:34 +0000

This guide is to show you how to create a simple react hook for data fetching (with revalidation).

🤨 Why this hook?

When fetching data for your react applications, you'd usually use both useState and useEffect, with values like loading, data and error e.g This example, this hook is to help abstract that functionality into one simple hook that can be used anywhere and multiple times.

🕺 Setting up the project

We would be using the create-react-app boiler template for typescript and the only external library we would be using is axios for data fetching.

Open up your terminal and type in the following commands.

yarn create react-app use-fetch --template typescript
# for npm
npx create-react-app use-fetch --template typescript

Change into the directory and install axios

cd use-fetch
yarn add axios
# for npm
npm install axios

Within the src directory delete the following file (because they aren't needed)

App.css
App.test.tsx

🎣 Custom `useFetch` hook

Within the src directory create another directory called hooks, this is where our hook will reside.

cd src
mkdir hooks

Your file structure should look something like this.

Within the hooks directory create a file called useFetch.tsx.

Type in the following inside the useFetch file.

import { useState, useEffect, useCallback } from "react";
import axios from "axios";

interface UseFetchProps {
  url: string;
}

const useFetch = ({ url }: UseFetchProps) => {
  const [data, setData] = useState<any>();
  const [error, setError] = useState(false);

  // function to fetch data
  const fetch = useCallback(async () => {
    setError(false);
    try {
      const fetchedData = await axios.get(url);
      setData(fetchedData.data);
    } catch {
      setError(true);
    }
  }, [url]);

  useEffect(() => {
    // on first load fetch data
    fetch();
  }, [fetch]);

  return {
    data,
    error,
    revalidate: fetch,
  };
};

export default useFetch;

The hook takes in a prop url, which is the API url at which we want to fetch data from. It has two states data and error which are used to store data gotten from the API and check for errors respectively.

We created a separate function for fetching the data called fetch and wrapped it within a useCallback hook, Visit here to see the reason why we used a useCallback hook.

Then we simply used a useEffect hook to run the fetch function as soon as the hook is mounted 🙂.

The hook returns data, error and revalidate which is the fetch function for when we want to programmatically revalidate the data.

😎 Using the hook

To use the hook we simply just import it and extract its values.
Within the App.tsx

import useFetch from "./hooks/useFetch";
import logo from "./logo.svg";

function App() {
  const { error, data, revalidate } = useFetch({
    url: "https://random-data-api.com/api/users/random_user?size=5",
  });

  if (!data) {
    return <h2>Loading...</h2>;
  }

  if (error) {
    return <h2>Error fetching users</h2>;
  }

  return (
    <div className="App">
      <img src={logo} alt="react logo" />
      <h1 className="title">useFetch()</h1>
      <button onClick={revalidate}>revalidate</button>
      <div className="items">
        {data.map((el: any) => (
          <div className="item" key={el.uid}>
            <img
              src={`https://avatars.dicebear.com/api/big-smile/${el.first_name}.svg`}
              alt={`${el.username} profile`}
              className="item__img"
            />
            <div className="item__info">
              <p className="name">
                {el.first_name} {el.last_name}{" "}
                <span className="username">(@{el.username})</span>
              </p>
              <p className="job">{el.employment.title}</p>
              <p
                className={`status ${
                  el.subscription.status.toLowerCase() === "active"
                    ? "success"
                    : el.subscription.status.toLowerCase() === "blocked"
                    ? "danger"
                    : "warn"
                }`}
              >
                {el.subscription.status}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

⏰ Adding Interval revalidation

You might need to fetch data from your API every 5 seconds for revalidation (ensuring your data is up-to-date).

We need to add some modifications to our useFetch hook. Lets and more props.

interface UseFetchProps {
  url: string;
  revalidate?: boolean;
  interval?: number;
}

revalidate will be a boolean to check if we want to implement interval revalidation or not, interval will be the time taken between every revalidation (in seconds).

...
const useFetch = ({ url, revalidate, interval }: UseFetchProps) => {
...

We'll create a state called revalidateKey that we will change on every interval which will be added to our useEffect dependency array. Adding this to our dependency array will ensure that the function within our useEffect will run everytime the revalidateKey changes.

To change the revalidateKey, we will create a new useEffect that has a setInterval.

...
const [revalidateKey, setRevalidateKey] = useState("");
...
useEffect(() => {
    const revalidateInterval = setInterval(() => {
      if (revalidate) {
        setRevalidateKey(Math.random().toString());
      }
      // if no interval is given, use 3 seconds
    }, (interval ? interval : 3) * 1000);
    return () => clearInterval(revalidateInterval);
  }, [interval, revalidate]);

Our useFetch hook should then look something like this.

const useFetch = ({ url, revalidate, interval }: UseFetchProps) => {
  const [revalidateKey, setRevalidateKey] = useState("");
  const [data, setData] = useState<any>();
  const [error, setError] = useState(false);

  // function to fetch data
  const fetch = useCallback(async () => {
    setError(false);
    try {
      const fetchedData = await axios.get(url);
      setData(fetchedData.data);
    } catch {
      setError(true);
    }
  }, [url]);

  useEffect(() => {
    const revalidateInterval = setInterval(() => {
      if (revalidate) {
        setRevalidateKey(Math.random().toString());
      }
      // if no interval is given, use 3 seconds
    }, (interval ? interval : 3) * 1000);
    return () => clearInterval(revalidateInterval);
  }, [interval, revalidate]);

  useEffect(() => {
    // on first load fetch data and when revalidateKey changes
    fetch();
  }, [fetch, revalidateKey]);

  return {
    data,
    error,
    revalidate: fetch,
  };
};

Using the useFetch hook ✨

const { error, data, revalidate } = useFetch({
    url: "https://random-data-api.com/api/users/random_user?size=5",
    revalidate: false,
    // fetch every 5 seconds
    interval: 5,
  });

⚠️ Graphql support

This hook uses only the GET method, and Graphql uses POST method for data fetching. To make the hook more dynamic you can add more props like isGraphql and query, isGraphql will be a boolean to check if its Graphql or REST so you can have a condition in your hook to use axios.post() instead of axios.get() and query for the graphql query.

Thank you for reading 🙏🏾, If you have any questions, additions, or subtractions please comment below.

The full source code is linked below 👇👇

brimblehq / use-fetch

data fetching hook with revalidation

Pagination in Javascript and React, with a custom usePagination() hook

damilola jerugba — Sat, 09 Oct 2021 11:37:09 +0000

This guide is to help you understand the concept of pagination and how to implement it in react, the concepts in this tutorial can be applied to any javascript project.

🤨 What is Pagination?

Pagination is the process of separating print or digital content into discrete pages. For print documents and some online content, pagination also refers to the automated process of adding consecutive numbers to identify the sequential order of pages.

Concept behind it? 💻

Let's say you have a total of 6 items on a page, and you want to only display 3 items at a time (per page). This means we are going to have a total of 2 pages, and if we want to display 2 items per page this means a total of?? you guessed it! 3 pages.

This formular is rather simple:
totalPages = totalContent / contentPerPage

Implementing it in Javascript (.slice()) 🔪

Calculating the content per page is rather easy, but how do we display certain content based on what page we are on? We simply need to understand the relationship between the page and the index of our content. Let first understand the .slice() Array method.

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

For example, let's say we have an array called scouts and we want to select only a portion of this array based on the array's index.


const scouts = ["levi", "hange", "erwin", "petra", "oruo", "miche"]
scouts.slice(2, 5)
// output: [ 'erwin', 'petra', 'oruo' ]
scouts.slice(1, 3)
// output: [ 'hange', 'erwin' ]

We all know javascript follows a zero-based index, so the first parameter is the index from which we want to start the slice from and the second parameter is the index right after where we want the slice to end. e.g if we want 2 to 4 we use .slice(2, 5) as seen in the first example.

Mapping page number to index

All we need to do is know what the startIndex and lastIndex should be based on the page number. this relationship is quite simple.

As you can tell from the diagram above the last index is simply the current page multiplied by the given content by page, while the first index is the content by page subtracted from the last index.


// assuming we are on page one
const page = 1;
const contentPerPage = 3
const lastIndex = page * contentPerPage // 3
const firstIndex = lastIndex - contentPerPage // 0

scouts.slice(firstIndex, lastIndex)
// scouts.slice(0, 3) => [ 'levi', 'hange', 'erwin' ]

// page 2
// scouts.slice(3, 6) => [ 'petra', 'oruo', 'miche' ]

Wow!, that was easy 😳.

Custom `usePagination` hook 🎣

Now that we've learned the concept behind it, let's implement this in react and create our custom hook to help us automate this process.
This hook takes in an object that takes in the properties contentPerPage which is how many items should be displayed at a time and count which is the total number of items given (Array length). It also returns an object with the following properties.

page - current page we are on
totalPages - total number of pages generated
firstContentIndex - first index for the .slice() method
lastContentIndex - last index for the .slice() method
nextPage - function to navigate one page foward
prevPage - function to navigate one page backward
setPage - function to go to a certain page

The type definitions are as follows:


interface UsePaginationProps {
    contentPerPage: number,
    count: number,
}

interface UsePaginationReturn {
    page: number;
    totalPages: number;
    firstContentIndex: number;
    lastContentIndex: number;
    nextPage: () => void;
    prevPage: () => void;
    setPage: (page: number) => void;
}

type UsePagination = (UsePaginationProps) => (UsePaginationReturn);

In your React project create a folder called hooks and create a file called usePagination, this is where our custom hook will reside.

Type the following within it


import { useState } from "react";

const usePagination: UsePagination = ({ contentPerPage, count }) => {
  const [page, setPage] = useState(1);
  // number of pages in total (total items / content on each page)
  const pageCount = Math.ceil(count / contentPerPage);
  // index of last item of current page
  const lastContentIndex = page * contentPerPage;
  // index of first item of current page
  const firstContentIndex = lastContentIndex - contentPerPage;

  // change page based on direction either front or back
  const changePage = (direction: boolean) => {
    setPage((state) => {
      // move forward
      if (direction) {
        // if page is the last page, do nothing
        if (state === pageCount) {
          return state;
        }
        return state + 1;
        // go back
      } else {
        // if page is the first page, do nothing
        if (state === 1) {
          return state;
        }
        return state - 1;
      }
    });
  };

  const setPageSAFE = (num: number) => {
    // if number is greater than number of pages, set to last page
    if (num > pageCount) {
      setPage(pageCount);
      // if number is less than 1, set page to first page
    } else if (num < 1) {
      setPage(1);
    } else {
      setPage(num);
    }
  };

  return {
    totalPages: pageCount,
    nextPage: () => changePage(true),
    prevPage: () => changePage(false),
    setPage: setPageSAFE,
    firstContentIndex,
    lastContentIndex,
    page,
  };
};

export default usePagination;

We are managing the current page value with useState, also notice that pageCount is also equal to the value of the last page. I've made the code above as explanatory as I can.

Implementation ✍🏾

We simply import the hook then input the needed properties.

...
  const {
    firstContentIndex,
    lastContentIndex,
    nextPage,
    prevPage,
    page,
    setPage,
    totalPages,
  } = usePagination({
    contentPerPage: 3,
    count: people.length,
  });
...

Then we simply slice our data with the firstContentIndex and lastContentIndex.

...
<div className="items">
  {people
    .slice(firstContentIndex, lastContentIndex)
    .map((el: any) => (
      <div className="item" key={el.uid}></div>
   ))}
</div>
...

Below is a simple functionality to help us generate our buttons, then we add their corresponding onClick handlers.


<div className="pagination">
  <p className="text">
    {page}/{totalPages}
  </p>
  <button onClick={prevPage} className="page">
    &larr;
  </button>
  {/* @ts-ignore */}
  {[...Array(totalPages).keys()].map((el) => (
    <button
      onClick={() => setPage(el + 1)}
      key={el}
      className={`page ${page === el + 1 ? "active" : ""}`}
    >
      {el + 1}
    </button>
  ))}
  <button onClick={nextPage} className="page">
    &rarr;
  </button>
</div>

We are done! As you can see below our usePagination hook works as planned.

Thank you for reading 🙏🏾, If you have any questions, additions, or subtractions please comment below.

The full source code is linked below 👇👇

damiisdandy / use-pagination

a react usePagination() hook

Ultimate Guide to setup React Context API with a custom hook [Typescript]

damilola jerugba — Thu, 30 Sep 2021 10:09:35 +0000

This is a guide to help you set up React Context API with typescript.

🤨 What is React Context API?

Context is designed to share data that can be considered “global” for a tree of React components, This prevents Prop drilling and allows you to pass data around your react component tree efficiently.

There are external libraries like Redux that help with this, but luckily react implemented a built-in feature called React Context API that does this perfectly.

Let's dive in! 😁

Setup 🛠

To set up the project we need to first create a create-react-app application with the typescript template, To do this open up a terminal window and run the command

npx create-react-app context-typescript --template typescript

# or

yarn create react-app context-typescript --template typescript

Open the context-typescript directory in your favorite text editor like VS code and delete the following files within the src directory.

App.css
App.test.tsx

or simply run the commands

cd context-typescript/src
rm App.css App.test.tsx

Then open up the App.tsx file, clear everything within it and copy the following lines of code inside it.

// src/App.tsx

import logo from './logo.svg';

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

Declaring the Interfaces and types we'll use 🧩

Within the react-app-env.d.ts file we'll declare the Interface for our global state, We will be building a To-do application in this example to illustrate the use of the context API.

// react-app-env.d.ts

interface Todo {
    id: number;
    title: string;
    isCompleted: Boolean;
    createdAt: Date;
}
interface State {
    isDark: boolean;
    todos: Todo[];
}

Creating Our Context 🌴

Create a folder in the src directory called context within it create two files called index.tsx and reducer.ts.

or run the commands

mkdir src/context

cd src/context

touch index.tsx reducer.ts

Within the index.tsx we'll create our context, global context provider, and our custom hook. In the reducer.ts we'll create our reducer function.

Open up the index.tsx type the following

// src/context/index.tsx

import {
  createContext,
  Dispatch,
  ReactNode,
  useContext,
  useReducer,
} from "react";

// Initial State
const initialState: State = {
  isDark: false,
  todos: [
    {
      id: 0,
      title: "Prepare dev.to article ✍",
      createdAt: new Date("2021-09-28T12:00:00-06:30"),
      isCompleted: false,
    },
    {
      id: 2,
      title: "Watch season 3 episode 2 of Attack on titans 👀",
      createdAt: new Date("2021-09-30T11:00:00-06:30"),
      isCompleted: false,
    },
  ],
};

We simply just imported all that we'll be using in the file and initiated our initial state. Notice how we used the State interface.

Before we create our Context let's first declare the Interface and type we'll be using for our context.

Within the react-app-env.d.ts file add the following lines of code.

// react-app-env.d.ts

...
type ActionTypes = 'TOGGLE_MODE' | 'ADD_TODO' | 'REMOVE_TODO' | 'MARK_AS_DONE';

interface Action {
    type: ActionTypes;
    payload?: any;
}

We've just declared the Action interface and its respective types (ActionTypes)

Now we can create our context, Add the following lines of code underneath the initial state we just declared in the index.tsx

// src/context/index.tsx

...
// Create Our context
const globalContext = createContext<{
  state: State;
  dispatch: Dispatch<Action>;
}>({
  state: initialState,
  dispatch: () => {},
});

We've already imported the createContext function and Dispatch interface, we also implemented our Action interface, and set the initial state to our initialState

Creating the Reducer 📦

Before we create the reducer function lets the Type for our reducer function within the react-app-env.d.ts file

// react-app-env.d.ts
...

type ReducerType = (state: State, action: Action) => State;

This is simply a function that takes in the State and Action and returns the State.

Within the reducer.ts file, copy the function below.

// src/context/reducer.ts

const reducer: ReducerType = (state, action) => {
  switch (action.type) {
    case "TOGGLE_MODE":
      return { ...state, isDark: !state.isDark }
    case "ADD_TODO":
      const mostRecentTodos = state.todos.sort((a, b) => b.id - a.id);
      return {
        ...state, todos: [
          ...state.todos,
          {
            // generate it's id based on the most recent todo
            id: mostRecentTodos.length > 0 ? mostRecentTodos[0].id + 1 : 0,
            title: action.payload,
            isCompleted: false,
            createdAt: new Date(),
          }
        ]
      };
    case "REMOVE_TODO":
      return { ...state, todos: state.todos.filter(el => el.id !== action.payload) }
    case "MARK_AS_DONE":
      const selectedTodo = state.todos.find(el => el.id === action.payload);
      if (selectedTodo) {
        return {
          ...state, todos: [...state.todos.filter(el => el.id !== action.payload), {
            ...selectedTodo,
            isCompleted: true,
          }]
        }
      } else {
        return state
      }
    default:
      return state;
  }
}

export default reducer;

Based on the ActionTypes type we previously initialized, we are using for the switch statement's action.type

Because we are using Typescript our text editor or IDE helps us with IntelliSense for the action types.

Creating the Global Provider 🌐

Within the index.tsx file we'll import the reducer function we just created.

// src/context/index.tsx
...
import reducer from "./reducer";
...

Then we'll create the global provider that we'll wrap around our root component

// src/context/index.tsx

...
// Provider to wrap around our root react component
export const GlobalContextProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <globalContext.Provider
      value={{
        state,
        dispatch,
      }}
    >
      {children}
    </globalContext.Provider>
  );
};

We've previously imported ReactNode and useReducer.
The Provider property is gotten from our previously created globalContext, We also added in the parameters reducer and initialState inside the useReducer hook, (psst! picture useReduer as useState on steroids 💪). The children prop is simply the direct child component of GlobalContextProvider (our entire app).

Now we simply just wrap the GlobalContextProvider around our root component within the src/index.tsx file

Your code should look like this

// src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { GlobalContextProvider } from "./context";

ReactDOM.render(
  <React.StrictMode>
    <GlobalContextProvider>
      <App />
    </GlobalContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Custom Hook 📎

We are going to create a hook that lets us access our global state and dispatch function anywhere in our component tree (react app).

Before we do that let's create its Type, this is useful because it lets us use the power of Typescript.

We'll declare this within the react-app-env.d.ts file like we always have.

// react-app-env.d.ts

...
type ContextHook = () => {
    state: State,
    dispatch: (action: Action) => void;
}

This is a function that simply returns an object that contains our global state and dispatch function.

Now we create the hook within the src/context/index.tsx file

// src/context/index.tsx

...
// Custom context hook
export const useGlobalContext: ContextHook = () => {
  const { state, dispatch } = useContext(globalContext);
  return { state, dispatch };
};

We previously imported the useContext hook, which takes in our globalContext.

Using our custom hook

Within the App.tsx file we'll import the useGlobalContext hook we just created.

// src/App.tsx

import logo from './logo.svg';
import { useGlobalContext } from "./context";

function App() {
  const { state, dispatch } = useGlobalContext();
  return (
    <div>
    </div>
  );
}

export default App;

With the power of typescript, we have IntelliSense to help us out.

That's all for this tutorial 🎉, This is my first article 😅, feedback will be nice, Be sure to comment down below if you have any questions, additions, or subtractions.

The full source code to with project with a functioning todo application is linked below 👇👇

damiisdandy / context-api-typescript

An example project on the article I wrote about setting up react's context api with typescript

Thank you for reading 🙏!

DEV Community: damilola jerugba

Create infinite auto-scroll animation with pure CSS

🤨 What exactly is this animation?

Concept behind it? 💻

Structuring animation elements 🏛

How does it work? 🤔

damiisdandy / css-animation-auto-scroll

infinte auto scroll animation with pure CSS

Custom React useFetch() hook for data fetching with revalidation

🤨 Why this hook?

🕺 Setting up the project

🎣 Custom useFetch hook

😎 Using the hook

⏰ Adding Interval revalidation

⚠️ Graphql support

brimblehq / use-fetch

data fetching hook with revalidation

Pagination in Javascript and React, with a custom usePagination() hook

🤨 What is Pagination?

Concept behind it? 💻

Implementing it in Javascript (.slice()) 🔪

Mapping page number to index

Custom usePagination hook 🎣

Implementation ✍🏾

damiisdandy / use-pagination

a react usePagination() hook

Ultimate Guide to setup React Context API with a custom hook [Typescript]

🤨 What is React Context API?

Setup 🛠

Declaring the Interfaces and types we'll use 🧩

Creating Our Context 🌴

Creating the Reducer 📦

Creating the Global Provider 🌐

Custom Hook 📎

Using our custom hook

damiisdandy / context-api-typescript

An example project on the article I wrote about setting up react's context api with typescript

🎣 Custom `useFetch` hook

Custom `usePagination` hook 🎣