@dr.pogodin/react-utils 1.40.11 → 1.40.12

package/build/types-code/shared/components/MetaTags.d.ts

@@ -1,7 +1,11 @@
-import { type ReactNode } from 'react';
+import { type Context as ContextT, type FunctionComponent, type ReactNode } from 'react';
 type PropsT = {
     children?: ReactNode;
     description: string;
+    extraMetaTags?: Array<{
+        content: string;
+        name: string;
+    }>;
     image?: string;
     siteName?: string;
     socialDescription?: string;
@@ -10,59 +14,11 @@ type PropsT = {
     url?: string;
 };
 /**
- * The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,
- * which helps to inject meta tags (page title, a brief content description,
- * and social media thumbnails) into generated pages.
- *
- * When `<MetaTags>` are nested within the app's component tree, meta tags
- * content injected by components encountered down the tree overrides tags
- * injected by previously encountered `<MetaTags>` components.
- *
- * **Children:** `<MetaTags>` children, if any, are rendered at the component's
- * location. The context passes down all meta tag properties of parent
- * `<MetaTag>` instances. These properties can fetched within children
- * hierarchy in the following way, thus facilitating tags modification by
- * children:
- * ```jsx
- * import { useContext } from 'react';
- * import { MetaTags } from '@dr.pogodin/react-utils';
- * export default function SampleComponent() {
- *   const { title, description, ...rest } = useContext(MetaTags.Context);
- *   // Do something with these props here, e.g. prefix the page title with
- *   // the component name:
- *   return (
- *     <MetaTags title={`Sample component - ${title}`} />
- *   );
- * }
- * ```
- * @param [props]
- * @param [props.description] Page description to use in
- * the `description` meta tag, and as a default description of Open Graph Tags.
- * @param [props.image] The absolute URL of thumbnail image to use
- * in Open Graph Tags (`twitter:image`, and `og:image`). By default these tags
- * are not injected.
- *
- * **BEWARE:** It must be a complete, absolute URL, including the correct
- * website domain and HTTP schema.
- *
- * @param [props.siteName]: The site name to use in `twitter:site`,
- * and `og:sitename` tags. By default these tags are not injected.
- *
- * @param [props.socialDescription] The site description to use in
- * `twitter:description` and `og:description` meta tags. By default the value of
- * `description` prop is used.
- * @param [props.socialTitle] The page title to use in
- * `twitter:title`, `og:title`, and `og:image:alt` tags. By default the value of
- * `title` prop is used. Also the `og:image:alt` tag is only injected if `image`
- * prop is present.
- *
- * @param props.title: The page name to use in the `<title>` tag.
- * It is also used as the default value of `socialTitle` prop.
- *
- * @param [props.url] The page URL to use in `og:url` tag.
- * By default the tag is not injected.
+ * Auxiliary wrapper around "react-helmet", which helps to inject meta tags
+ * (page title, a brief content description, and social media thumbnails) into
+ * generated pages.
  */
-declare const MetaTags: React.FunctionComponent<PropsT> & {
-    Context: React.Context<PropsT>;
+declare const MetaTags: FunctionComponent<PropsT> & {
+    Context: ContextT<PropsT>;
 };
 export default MetaTags;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.11",
+  "version": "1.40.12",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -113,7 +113,7 @@
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.80.6",
+    "sass": "^1.80.7",
     "sass-loader": "^16.0.3",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",

package/src/shared/components/MetaTags.tsx

@@ -1,9 +1,20 @@
-import { type ReactNode, createContext, useMemo } from 'react';
+import {
+  type Context as ContextT,
+  type FunctionComponent,
+  type ReactNode,
+  createContext,
+  useMemo,
+} from 'react';
+
 import { Helmet } from 'react-helmet';
 
 type PropsT = {
   children?: ReactNode;
   description: string;
+  extraMetaTags?: Array<{
+    content: string;
+    name: string;
+  }>;
   image?: string;
   siteName?: string;
   socialDescription?: string;
@@ -18,63 +29,16 @@ const Context = createContext<PropsT>({
 });
 
 /**
- * The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,
- * which helps to inject meta tags (page title, a brief content description,
- * and social media thumbnails) into generated pages.
- *
- * When `<MetaTags>` are nested within the app's component tree, meta tags
- * content injected by components encountered down the tree overrides tags
- * injected by previously encountered `<MetaTags>` components.
- *
- * **Children:** `<MetaTags>` children, if any, are rendered at the component's
- * location. The context passes down all meta tag properties of parent
- * `<MetaTag>` instances. These properties can fetched within children
- * hierarchy in the following way, thus facilitating tags modification by
- * children:
- * ```jsx
- * import { useContext } from 'react';
- * import { MetaTags } from '@dr.pogodin/react-utils';
- * export default function SampleComponent() {
- *   const { title, description, ...rest } = useContext(MetaTags.Context);
- *   // Do something with these props here, e.g. prefix the page title with
- *   // the component name:
- *   return (
- *     <MetaTags title={`Sample component - ${title}`} />
- *   );
- * }
- * ```
- * @param [props]
- * @param [props.description] Page description to use in
- * the `description` meta tag, and as a default description of Open Graph Tags.
- * @param [props.image] The absolute URL of thumbnail image to use
- * in Open Graph Tags (`twitter:image`, and `og:image`). By default these tags
- * are not injected.
- *
- * **BEWARE:** It must be a complete, absolute URL, including the correct
- * website domain and HTTP schema.
- *
- * @param [props.siteName]: The site name to use in `twitter:site`,
- * and `og:sitename` tags. By default these tags are not injected.
- *
- * @param [props.socialDescription] The site description to use in
- * `twitter:description` and `og:description` meta tags. By default the value of
- * `description` prop is used.
- * @param [props.socialTitle] The page title to use in
- * `twitter:title`, `og:title`, and `og:image:alt` tags. By default the value of
- * `title` prop is used. Also the `og:image:alt` tag is only injected if `image`
- * prop is present.
- *
- * @param props.title: The page name to use in the `<title>` tag.
- * It is also used as the default value of `socialTitle` prop.
- *
- * @param [props.url] The page URL to use in `og:url` tag.
- * By default the tag is not injected.
+ * Auxiliary wrapper around "react-helmet", which helps to inject meta tags
+ * (page title, a brief content description, and social media thumbnails) into
+ * generated pages.
  */
-const MetaTags: React.FunctionComponent<PropsT> & {
-  Context: React.Context<PropsT>;
+const MetaTags: FunctionComponent<PropsT> & {
+  Context: ContextT<PropsT>;
 } = ({
   children,
   description,
+  extraMetaTags,
   image,
   siteName,
   socialDescription,
@@ -103,6 +67,20 @@ const MetaTags: React.FunctionComponent<PropsT> & {
     url,
   ]);
 
+  const extra: ReactNode[] = [];
+  if (extraMetaTags?.length) {
+    for (let i = 0; i < extraMetaTags.length; ++i) {
+      const { content, name } = extraMetaTags[i]!;
+      extra.push(
+        <meta
+          content={content}
+          name={name}
+          key={`extra-meta-tag-${i}`}
+        />,
+      );
+    }
+  }
+
   return (
     <>
       <Helmet>
@@ -132,6 +110,7 @@ const MetaTags: React.FunctionComponent<PropsT> & {
           siteName ? (<meta name="og:sitename" content={siteName} />) : null
         }
         { url ? (<meta name="og:url" content={url} />) : null }
+        {extra}
       </Helmet>
       {
         children ? (