@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
39 lines • 1.39 kB
JavaScript
import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { is } from 'ramda';
/**
* The FavIcon component sets the favicon displayed by the browser on the website's tab
* The html <link> of the icon must have an id attribute of 'favicon'
*/
const FavIcon = ({ favIconSource, defaultFavIcon }) => {
const onError = useCallback((event, favicon) => {
favicon.href = defaultFavIcon || '#';
if (is(String, event))
return;
const target = event.target;
target.onerror = null;
}, [defaultFavIcon]);
const setFavIcon = useCallback((source) => {
const favicon = document.getElementById('favicon') || top.document.getElementById('favicon');
const img = new Image();
img.onerror = (event) => onError(event, favicon);
img.onload = () => (favicon.href = source || '#');
img.src = source;
}, [onError]);
useEffect(() => {
setFavIcon(favIconSource);
}, [favIconSource, setFavIcon]);
return React.createElement(React.Fragment, null);
};
FavIcon.propTypes = {
/**
* URL of the favicon image
*/
favIconSource: PropTypes.string,
/**
* URL of the fallback image. This will be used when the onerror event occurs
*/
defaultFavIcon: PropTypes.string
};
export default FavIcon;
//# sourceMappingURL=FavIcon.js.map