React Hooks With Context

But what is a custom hook?

export const useHelp = () => {
const show = () => {};
const hide = () => {};
return { show, hide };
};
export const useHelp = () => {  useEffect(() => {
history.listen(() => {
show()
});
}, []);
const show = () => {
};
const hide = () => {
};
return { show, hide };
};
export function loadScript(src = '', innerHTML = '') {
return new Promise(resolve => {
const script = document.createElement('script');
script.src = src;
script.innerHTML = innerHTML;
script.onload = () => {
resolve(true);
};
script.onerror = () => {
resolve(false);
};
document.body.appendChild(script);
});
}
export const useHelp = () => {  useEffect(() => {
history.listen(() => {
show()
});
}, []);
const show = () => {
};
const hide = () => {
};
const boot = () => {
loadScript(
‘Script_address’
)
};
return { show, hide , boot};
};
export const useHelp = () => {
useEffect(() => {
history.listen(() => {
show();
});
}, []);
const [showHelp, setShowHelp] = useState(true); const hideShowHelp = show => {
if (show) {
// logic to show button
} else {
// logic to hide button
}
};
useEffect(() => {
hideShowHelp(showHelp);
}, [showHelp]);
const show = () => {
setShowHelp(true);
};
const hide = () => {
setShowHelp(false);
};
const boot = () => {
loadScript('Script_address').then(() => hideShowHelp(showHelp));
};
return { show, hide, boot };
};

But What is React Context?

const HelpContext = createContext(null);export const HelpProvider = ({ children }) => {
const [show, setShow] = useState(true);
const history = useHistory();
const [isBooted, setIsBooted] = useState(false);
useEffect(() => {
history.listen(() => {
setShow(true); // By default set it to true whenever we changes the page.
});
}, []);
useEffect(() => {
// Code to show/hide the button through api
}, [show, isBooted]);
return (
<HelpContext.Provider value={{ setShow }}>{children}</HelpContext.Provider>
);
};
import React, { createContext, useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router';
import { loadScript } from '../utils/loadScript';
const HelpContext = createContext(null);export const HelpProvider = ({ children }) => {
const [show, setShow] = useState(true);
const history = useHistory();
const [isBooted, setIsBooted] = useState(false);
useEffect(() => {
history.listen(() => {
setShow(true);
});
}, []);
useEffect(() => {
if (show) {
//logic to show widget
} else {
// logic to hide widget
}
}, [show, isBooted]);
return (
<HelpContext.Provider value={{ setShow, setIsBooted }}>
{children}
</HelpContext.Provider>
);
};
HelpProvider.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
};
export const useHelp = () => {
const { setShow, setIsBooted } = useContext(HelpContext);
const show = () => {
setShow(true);
};
const hide = () => {
setShow(false);
};
const boot = () => {
loadScript('path/to/script').then(() => {
// Some initialisation
setIsBooted(true);
});
};
return { show, hide, boot };
};
<FreshWorksHelpProvider><App /></FreshWorksHelpProvider>
const { boot } = useFreshWorksHelp();useEffect(() => {boot();}, []);
const { hide } = useFreshWorksHelp();useEffect(() => {hide();}, []);

Please share your view on this.

--

--

--

Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Prelude to React JS

The benefits of using React JS

https://freebitco.in/?r=16454960

Learn Full Stack Ethereum Development — Part 1

Flatiron School Project #4 Rails API backend + Javascript frontend Project

Basic Routing in Angular

Apache Superset — manage custom viz plugins in production

How to Iterate through an object keys and values in JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ayush Bansal

Ayush Bansal

Web Developer

More from Medium

Updating React Router v5 to v6

State: React Hooks Or React Classes

Migrating from Redux to React Query

React Router V6. What’s New?