Make it easy! 'React useContext'

kishore kumar — Sat, 24 Oct 2020 10:24:23 +0000

What is React Context?

Imagine for a moment that you have a React app with a single parent component that contains many levels of child components inside of it.

Now, imagine passing data from the uppermost component all the way down to the last child component.

In React data is passed top-down from one component to another through props.

You’d have to pass that data through each and every component, through their props, until you reach the last child component.

That’s painstaking, tiresome, and prone to errors. 👎

This is where Context comes to the rescue. 👏

The React Context API allows you to easily access data at different levels of the component tree, without having to pass data down through props.

How Does the useContext Hook Work?

The useContext Hook provides all the same functionality you’d expect from the Context API, just packaged up into a simple to use Hook that you can use inside functional components.

Let's compare the difference between using the Context inside a class component and the functional component.

Using the Class Component:-

Create a file named ClassContextComponent.js and copy and paste the code.

import React from "react";
import { ThemeContext } from "./App";

export default class ClassContextComponent extends Component {
    themeStyles(dark) {
        return {
            backgroundColor: dark ? "#333" : "#ccc",
            color: dark ? "#ccc" : "#333",
            padding: "2rem",
            margin: "2rem",
        };
    }

    render() {
        return (
            <ThemeContext.Consumer>
                {(darkTheme) => {
                    return <div style={this.themeStyles(darkTheme)}>Class Theme</div>;
                }}
            </ThemeContext.Consumer>
        );
    }
}

Using the Functional Component:-

Create a FunctionContextComponent.js file and move the code.

import React from "react";
import { useTheme, useThemeUpdate } from "./ThemeContext";

export default function FunctionContextComponent() {
  const darkTheme = useTheme();
  const toggleTheme = useThemeUpdate();
    const themeStyles = {
        backgroundColor: darkTheme ? "#333" : "#ccc",
        color: darkTheme ? "#ccc" : "#333",
        padding: "2rem",
        margin: "2rem",
    };
    return (
        <>
            <button onClick={toggleTheme}>Toggle theme</button>
            <div style={themeStyles}>Function Theme</div>
        </>
    );
}

Lets have an Example:-

Create an App.js file and copy this code.

import React, { useState } from "react";
import FunctionContextComponent from "./FunctionContextComponent";
import { ThemeProvider } from "./ThemeContext";

const App = () => {
    return (
        <ThemeProvider>
            <FunctionContextComponent />
        </ThemeProvider>
    );
};

export default App;

Create a new file ContextExample.js and save it in the root directory.

Everything inside the <ThemeContext.Provider value={darkTheme}> wrapper will have all the properties of ThemeContext.Provider without passing it as a prop for each Component.

export const ThemeContext = React.createContext();

In this, we use the createContext to create ThemeContext and exports it. So that we can use it anywhere within our application.

const [darkTheme, setDarkTheme] = useState(true);

const toggleTheme = () => {
  setDarkTheme(prevDarkTheme => !prevDarkTheme)
}

This function toggles the dark and the light theme.

Create a themeProvider.js file in the same directory od the App.js and copy the code.

import React, { useContext, useState } from "react";

const ThemeContext = React.createContext();
const ThemeUpdateContext = React.createContext();

export function useTheme() {
    return useContext(ThemeContext);
}

export function useThemeUpdate() {
    return useContext(ThemeUpdateContext);
}

export function ThemeProvider({ children }) {
    const [darkTheme, setDarkTheme] = useState(true);

    const toggleTheme = () => {
        setDarkTheme((prevDarkTheme) => !prevDarkTheme);
    };

    return (
        <ThemeContext.Provider value={darkTheme}>
            <ThemeUpdateContext.Provider value={toggleTheme}>
                {children}
            </ThemeUpdateContext.Provider>
        </ThemeContext.Provider>
    );
};

In the themeProvider.js we created a custom hooks useTheme & useThemeUpdate to send the toggle function to the children. In this case the FunctionContextComponenet Component.

The useContext is mainly used when we have to send the prop to a children which is way back. This is the basic use of the useContext.

Reference:-

Map API🌎

kishore kumar — Sun, 09 Aug 2020 11:36:47 +0000

Using an already existing API to our advantage is far better and easier than creating one from scratch.

I have used this on my website and it is super easy and free.

How to get Google Map API🌎

Go to the Google Cloud Platform Console.
Click the project drop-down and select or create the project for which you want to add an API key.
Click the menu button and select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key.
Click Close.
The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)

Add the API key to your request😉

You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Steps in Detail

Go to
Press the 'Get Started' button. In the window that opens, tick both 'Maps' and 'Places'. Press Continue. At this stage, you will be asked to create a Google account or log in to your existing one.
In the updated window, choose 'Select a project' and enter the project name (e.g. Set Compass) in the box below. Then click Next.
In the updated window, click Create Billing Account
After clicking Next in Step 2, will be offered to enable your APIs. Press Next.
You will see a new window with your API key in the box. Save the key to be able to use it and press Done.

7.(Optional) To protect your API Key and prevent anyone else from using it, click on credentials in the left pane then click on the project name as shown below.

8.(Optional) From Application restrictions select HTTP referrers (Web sites), enter https://setcompass.com/* in the Accept requests from these HTTP referrers (Web sites). Then click Save.

9.Finally go to the registration page at setcompass.com, fill in all the fields and paste your copied Google Maps API Key as shown below.

Reference📚

Google API

Forem: kishore kumar