UNPKG

@theprojectsx/react-head

Version:

Lightweight Component to manage the head of your React and Next JS applications

3 lines (2 loc) 2.71 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=(e,t,r)=>{if("charset"===e){const e=document.querySelector("meta[charset]");if(e)e.setAttribute("charset",t);else{const e=document.createElement("meta");e.setAttribute("charset",t),document.head.appendChild(e)}return}const i=document.querySelector(`meta[${e}="${t}"]`);if(i)i.setAttribute("content",r);else{const i=document.createElement("meta");i.setAttribute(e,t),i.setAttribute("content",r),document.head.appendChild(i)}},r=(e,t)=>{const r=document.createElement(e);Object.entries(t).filter((([e])=>"children"!==e)).forEach((([e,t])=>{r.setAttribute(e,t)})),t.children&&(r.textContent=t.children),document.head.appendChild(r)},i=({title:i,base:n,meta:s,link:l,style:c,script:a,noscript:o,template:p})=>{e.useEffect((()=>{if(!i)return;document.title=i;const e=setTimeout((()=>{document.title=i}),24);return()=>clearTimeout(e)}),[i]),e.useEffect((()=>{if(!n)return;const e=document.querySelector("base");if(e)Object.entries(n).forEach((([t,r])=>{e.setAttribute(t,r)}));else{const e=document.createElement("base");Object.entries(n).forEach((([t,r])=>{e.setAttribute(t,r)})),document.head.appendChild(e)}}),[n]),e.useEffect((()=>{0!==s.length&&s.forEach((e=>{const{name:r,property:i,httpEquiv:n,charset:s,content:l}=e;if(s)return void t("charset",s);const c=r?"name":i?"property":n?"http-equiv":null;c&&t(c,r||i||n,l)}))}),[s]),e.useEffect((()=>{0!==l.length&&l.forEach((e=>r("link",e)))}),[l]),e.useEffect((()=>{0!==c.length&&c.forEach((e=>r("style",e)))}),[c]),e.useEffect((()=>{0!==a.length&&a.forEach((e=>r("script",e)))}),[a]),e.useEffect((()=>{0!==o.length&&o.forEach((e=>r("noscript",e)))}),[o]),e.useEffect((()=>{0!==p.length&&p.forEach((e=>r("template",e)))}),[p])};exports.default=({children:t})=>{const r=e.Children.toArray(t),n=r.find((t=>e.isValidElement(t)&&"title"===t.type)),s=r.find((t=>e.isValidElement(t)&&"base"===t.type)),l=r.filter((t=>e.isValidElement(t)&&"meta"===t.type)),c=r.filter((t=>e.isValidElement(t)&&"link"===t.type)),a=r.filter((t=>e.isValidElement(t)&&"style"===t.type)),o=r.filter((t=>e.isValidElement(t)&&"script"===t.type)),p=r.filter((t=>e.isValidElement(t)&&"noscript"===t.type)),d=r.filter((t=>e.isValidElement(t)&&"template"===t.type));return i({title:n?String(n.props.children):void 0,base:s?s.props:void 0,meta:l.map((t=>e.isValidElement(t)?t.props:{})),link:c.map((t=>e.isValidElement(t)?t.props:{})),style:a.map((t=>e.isValidElement(t)?t.props:{})),script:o.map((t=>e.isValidElement(t)?t.props:{})),noscript:p.map((t=>e.isValidElement(t)?t.props:{})),template:d.map((t=>e.isValidElement(t)?t.props:{}))}),null},exports.useReactHead=i; //# sourceMappingURL=index.js.map