@shopify/react-html
Version:
A component to render your react app with no static HTML.
78 lines (77 loc) • 2.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var react_effect_1 = require("@shopify/react-effect");
var context_1 = require("./context");
function useDomEffect(perform, inputs) {
if (inputs === void 0) { inputs = []; }
var manager = react_1.useContext(context_1.HtmlContext);
var effect = function () {
perform(manager);
};
react_effect_1.useServerEffect(effect, manager.effect);
react_1.useEffect(effect, tslib_1.__spread([manager], inputs));
}
exports.useDomEffect = useDomEffect;
function useTitle(title) {
useDomEffect(function (manager) { return manager.addTitle(title); }, [title]);
}
exports.useTitle = useTitle;
function useLink(link) {
useDomEffect(function (manager) { return manager.addLink(link); }, [JSON.stringify(link)]);
}
exports.useLink = useLink;
function useMeta(meta) {
useDomEffect(function (manager) { return manager.addMeta(meta); }, [JSON.stringify(meta)]);
}
exports.useMeta = useMeta;
function usePreconnect(source) {
useDomEffect(function (manager) {
return manager.addLink({
rel: 'preconnect',
href: source,
});
}, [source]);
}
exports.usePreconnect = usePreconnect;
function useFavicon(source) {
useDomEffect(function (manager) {
return manager.addLink({
rel: 'shortcut icon',
type: 'image/x-icon',
href: source,
});
}, [source]);
}
exports.useFavicon = useFavicon;
function useLocale(locale) {
useDomEffect(function (manager) { return manager.addHtmlAttributes({ lang: locale }); }, [locale]);
}
exports.useLocale = useLocale;
function useHtmlAttributes(htmlAttributes) {
useDomEffect(function (manager) { return manager.addHtmlAttributes(htmlAttributes); }, [
JSON.stringify(htmlAttributes),
]);
}
exports.useHtmlAttributes = useHtmlAttributes;
function useBodyAttributes(bodyAttributes) {
useDomEffect(function (manager) { return manager.addBodyAttributes(bodyAttributes); }, [
JSON.stringify(bodyAttributes),
]);
}
exports.useBodyAttributes = useBodyAttributes;
function useClientDomEffect(perform, inputs) {
if (inputs === void 0) { inputs = []; }
var manager = react_1.useContext(context_1.HtmlContext);
react_1.useEffect(function () {
perform(manager);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, tslib_1.__spread([manager, perform], inputs));
}
exports.useClientDomEffect = useClientDomEffect;
function useServerDomEffect(perform) {
var manager = react_1.useContext(context_1.HtmlContext);
react_effect_1.useServerEffect(function () { return perform(manager); }, manager.effect);
}
exports.useServerDomEffect = useServerDomEffect;