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.

--

--

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