feat: added general props support #8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-google-adsense",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Next.js Google AdSense",
   "main": "dist/index.js",
   "type": "commonjs",
@@ -16,7 +16,8 @@
     "test": "tsc & jest",
     "dev": "tsc -w",
     "dev:test": "tsc & jest --coverage",
-    "pub": "npm run test && npm run build && npm publish"
+    "pub": "npm run test && npm run build && npm publish",
+    "pub@beta": "npm run test && npm run build && npm publish --tag beta"
   },
   "repository": {
     "type": "git",

src/AdLayout.tsx

@@ -1,40 +1,43 @@
-import React from "react";
+import React, { DetailedHTMLProps } from "react";
 
 export type Layout = "display" | "in-article" | "custom";
 
-type AdLayoutProps = {
+interface AdLayoutProps
+  extends DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement> {
   dataAdClient: string;
   dataAdSlot: string;
-};
+}
 
 interface DisplayProps extends AdLayoutProps {
   responsive?: boolean;
 }
 
-export const Display = (props: DisplayProps) => {
+export const Display = ({ responsive, dataAdClient, dataAdSlot, ...props }: DisplayProps) => {
   return (
     <ins
       className="adsbygoogle"
       style={{ display: "block" }}
       data-ad-format="auto"
-      data-full-width-responsive={props.responsive ?? true}
-      data-ad-client={props.dataAdClient}
-      data-ad-slot={props.dataAdSlot}
+      data-full-width-responsive={responsive ?? true}
+      data-ad-client={dataAdClient}
+      data-ad-slot={dataAdSlot}
+      {...props}
     />
   );
 };
 
 interface InArticleProps extends AdLayoutProps {}
 
-export const InArticle = (props: InArticleProps) => {
+export const InArticle = ({ dataAdClient, dataAdSlot, ...props }: InArticleProps) => {
   return (
     <ins
       className="adsbygoogle"
       style={{ display: "block", textAlign: "center" }}
       data-ad-layout="in-article"
       data-ad-format="fluid"
-      data-ad-client={props.dataAdClient}
-      data-ad-slot={props.dataAdSlot}
+      data-ad-client={dataAdClient}
+      data-ad-slot={dataAdSlot}
+      {...props}
     />
   );
 };

src/GoogleAdSense.tsx

@@ -1,11 +1,13 @@
 // ref: https://github.com/btk/nextjs-google-adsense/blob/master/src/components/GoogleAdSense.tsx
 // ref: https://medium.com/frontendweb/how-to-add-google-adsense-in-your-nextjs-89e439f74de3
 
+import type { ScriptProps } from "next/script";
+
 import React from "react";
 import Script from "next/script";
 import { isPublisherId } from "./utils";
 
-type GoogleAdSenseProps = {
+interface GoogleAdSenseProps extends Omit<ScriptProps, "src" | "id"> {
   publisherId?: string;
   debug?: boolean;
 };
@@ -17,6 +19,7 @@ type GoogleAdSenseProps = {
 export const GoogleAdSense = ({
   publisherId,
   debug = false,
+  ...props
 }: GoogleAdSenseProps): JSX.Element | null => {
   const _publisherId =
     process.env.NEXT_PUBLIC_ADSENSE_PUBLISHER_ID ?? publisherId;
@@ -36,6 +39,7 @@ export const GoogleAdSense = ({
         debug ? `google_console=1` : ``
       }`}
       strategy="afterInteractive"
+      {...props}
     />
   );
 };