ScrolltoTop with React and react-router v6.

☪️♓🅰️♏⛎🇿🇼Mutezva — Sat, 05 Feb 2022 19:38:00 +0000

Navigating to the top of the page on a multi-page website using React and react-router v6

I have done a multi-page project with react with navigation in the header and footer. While the navigation on the header is not a real challenge, the footer navigation needs some extra coding for it to work perfectly or at least better.

Footer Navigation - the challenge

You have been following this website from the top and now you have reached the bottom of the site and at the bottom, there is some navigation to other pages. Clicking on any of the links works, the navigation is moving to the required page. But hold on, I am a keyboard user for one reason or the other. The page has moved to the right page but pressing the tab key again you see that you have been redirected to the bottom of the new page - yes that's a bit frustrating and confusing to assistive technology users.

The Fix

Create a ScrollToTop function in the App.js file

import { useEffect } from 'react';
import {  Routes, Route , useLocation } from 'react-router-dom'
import Header from './pages/shared/Header';
import Footer from './pages/shared/Footer';
import Features from './pages/features/Features';
import Pricing from './pages/pricing/Pricing';
import Stories from './pages/stories/Stories';
import Home from './pages/home/Home';
import { DataProvider } from './pages/context/Context';
import './sass/App.scss';

function App() {

  const ScrollToTop = () => {
    const { pathname } = useLocation();
    console.log(pathname)
    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);

    return null;
  }

  return (
    <div className="App">
      <Header />

      <DataProvider>

          <ScrollToTop />
          <Routes>

            <Route path="/" element={<Home />} />
            <Route path="stories" element={<Stories />} />
            <Route path="features" element={<Features />} />
            <Route path="pricing" element={<Pricing />} />

          </Routes>

        <Footer />
      </DataProvider>

    </div>
  );
}

export default App;

At this point, if you try the navigation, the focus will still stay at the bottom. I had assumed that I had done everything possible. A few more steps to solve this issue.

Move to the top of the file that has to be at the top and locate the element that should have focus when the page is navigated to. On this element write a tabindex=-1.

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method. (source - MDN)

import useRef in the same file
import { useContext, useRef , useEffect} from 'react'

and include the following in the component

const homeMain = useRef()

    useEffect(() => {
        homeMain.current.focus()
    })

On the element with the tabindex add the ref attribute <main tabIndex="-1" ref={homeMain} >. Do this to all the pages .

Here is a GitHub link to the project . The link for the

For a list of Frontend Mentor challenge projects

[React Number Memory game with Mongodb Realm]

☪️♓🅰️♏⛎🇿🇼Mutezva — Thu, 13 Jan 2022 17:52:40 +0000

Overview of My Submission

What is the Memory game

The memory game is a pairing game that contains a pair of similar objects. In the game i am using a pair of numbers between one and eight.
The user selects 2 cards one at a time, the idea is to select matching numbers whenever 2 cards are picked. If the cards are similar they remain open otherwise they close after 500ms and the selection process carries on until all cards are matched correctly.
This particular is a 4 by 4 board game with pairs of numbers between one and eight inclusive.

MongoDb Atlas and Realm

MongoDb atlas and Realm makes it easy to make a simple connection to a backend without hosting your own server and the best news is that these services have a free tier.
Realm provides the use of functions and has a function editor that assist you to get started. The functions created will be used in the frontend to get the data.
The database was created using another MongoDB atlas service known as MongoDb Compass.
here is a sample code of the realm function used in the React Frontend application

exports = function(arg){

    let collection = context.services
                    .get("mongodb-atlas") 
                    .db("memoryGame")
                    .collection("memory");

  return collection.find({});
};

Submission Category # (Action Star)

Link to Code

[Github repository] # (https://github.com/ChamuMutezva/memory-game-2021)
[Live preview link] # (https://memory-game-chamu-2021.netlify.app/)

Additional Resources / Info

[Mongodb Jumpstart videos] # (https://www.youtube.com/watch?v=RGfFpQF0NpE&list=PL4RCxklHWZ9v2lcat4oEVGQhZg6r4IQGV)

[Mongodb University - interactive learning] # (https://university.mongodb.com/mercury/M001/2021_December_14/chapter/Chapter_1_What_is_MongoDB_/lesson/5f5c03c704e9ff039e32729b/lecture)

[Shuffle array] # (http://stackoverflow.com/a/2450976)
[Inspiration of code drawn from] # (https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle)

function shuffle(array) {
    let currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (currentIndex !== 0) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

Screenshots

[Game image 1] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start1.png)

[Game image 2] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start2.png)

[Game image 3] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start3.png)

[Game image 4] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/endgame.png)

DEV Community: ☪️♓🅰️♏⛎🇿🇼Mutezva