Add TypeScript and Context support

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+quote_type = single

.gitignore

@@ -2,3 +2,6 @@ package-lock.json
 node_modules/
 npm-debug.*
 .idea
+pnpm-lock.yaml
+dist
+build

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## Unreleased
+
+- Added `AdSense` component
+- Added `AdSenseProvider` component
+- Added TypeScript support
+- Added ESM support
+
+**BREAKING CHANGE**:
+
+- Removed default export
+- Removed unimplemented `Baidu` component

README.md

@@ -1,47 +1,84 @@
 # react-adsense
 
-> react-adsense is a React-component for Google AdSense / Baidu advertisement.
+React components for Google AdSense.
 
 [![Build Status](https://travis-ci.org/hustcc/react-adsense.svg?branch=master)](https://travis-ci.org/hustcc/react-adsense)
 [![npm](https://img.shields.io/npm/v/react-adsense.svg)](https://www.npmjs.com/package/react-adsense)
 [![npm](https://img.shields.io/npm/dm/react-adsense.svg)](https://www.npmjs.com/package/react-adsense)
 [![npm](https://img.shields.io/npm/l/react-adsense.svg)](https://www.npmjs.com/package/react-adsense)
 [![demo](https://img.shields.io/badge/LiveDemo-ClickHere-ff69b4.svg)](http://git.hust.cc/react-adsense/)
 
+## Prepare
 
-# 1. Install
+First you need to open a Google AdSense account. You should get a script:
 
-> **npm install --save react-adsense**
+```html
+<script
+  async
+  src="https://pagead2syndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7292810486004926"
+  crossorigin="anonymous"
+></script>
+```
+
+Add it to your website's home page. Usually Google verify your website in two weeks. After the process is done, you will be able to create custom ad blocks.
+
+> **Note: Turn Off AdBlocker Before Continue!!!**
 
-Before use Google AdSense, you should add the `script` at the end of HTML.
+After creating an ad block, you should have a code snippet:
 
 ```html
-<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<script
+  async
+  src="https://pagead2syndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7099046271205844"
+  crossorigin="anonymous"
+></script>
+<ins
+  class="adsbygoogle"
+  style="display:block"
+  data-ad-format="fluid"
+  data-ad-layout-key="-fb+5w+4e-db+86"
+  data-ad-client="ca-pub-7099046271205844"
+  data-ad-slot="5725216730"
+></ins>
+<script>
+  (adsbygoogle = window.adsbygoogle || []).push({});
+</script>
+```
+
+We need `data-ad-*` attributes to use with react-adsense.
+
+## Install
+
+```bash
+npm install --save react-adsense
 ```
 
+## Usage
 
-# 2. Usage
+### Single Slot
+
+If you only have one ad slot, use `<AdSense/>` component. `client` and `slot` are required.
 
 ```jsx
 import React from 'react';
-import AdSense from 'react-adsense';
+import { AdSense } from 'react-adsense';
 
-// ads with no set-up
-<AdSense.Google
-  client='ca-pub-7292810486004926'
-  slot='7806394673'
-/>
+<AdSense client="ca-pub-7292810486004926" slot="7806394673" />;
+```
+
+You can also customize it:
 
+```jsx
 // ads with custom format
-<AdSense.Google
+<AdSense
   client='ca-pub-7292810486004926'
   slot='7806394673'
   style={{ width: 500, height: 300, float: 'left' }}
   format=''
 />
 
 // responsive and native ads
-<AdSense.Google
+<AdSense
   client='ca-pub-7292810486004926'
   slot='7806394673'
   style={{ display: 'block' }}
@@ -50,7 +87,7 @@ import AdSense from 'react-adsense';
 />
 
 // auto full width responsive ads
-<AdSense.Google
+<AdSense
   client='ca-pub-7292810486004926'
   slot='7806394673'
   style={{ display: 'block' }}
@@ -60,25 +97,54 @@ import AdSense from 'react-adsense';
 />
 ```
 
+### Multiple Slots
+
+If you have many ad slots, you can use `<AdSenseProvider/>` to define global parameters.
+
+```jsx
+import React from 'react';
+import { AdSense, AdSenseProvider } from 'react-adsense';
+
+<AdSenseProvider client="ca-pub-7292810486004926">
+  <AdSense slot="7806394673" />
+  <AdSense slot="7234149532" />
+  <AdSense slot="7294291011" />
+</AdSenseProvider>;
+```
+
+## Props
+
+### `client`
+
+Related to `data-ad-client`. Required.
+
+### `slot`
+
+Related to `data-ad-slot`. Required.
+
+### `layout`
+
+Related to `data-ad-layout`. Optional.
+
+### `layout-key`
+
+Related to `data-ad-layout-key`. Optional.
+
+### `format`
+
+Related to `data-ad-format`. Optional.
 
-# 3. Props
+### `responsive`
 
- - Required props:
-   - `client`
-   - `slot`
- - Optional props:
-   - `className`:
-   - `style`:
-   - `layout`:
-   - `layoutKey`:
-   - `format`:
-   - `responsive`:
+Related to `data-ad-responsive`. Optional.
 
+### `className`
 
-# 4. TODO
+Optional.
 
- - `Baidu` advertisement supported.
+### `style`
 
+Optional.
 
 # LICENSE
 

demo/App.tsx

@@ -0,0 +1,58 @@
+import { AdSense } from '../src';
+
+export default function App() {
+  console.log('haha');
+  return (
+    <div>
+      <h1> react-adsense: adsense for react </h1>
+      <p>
+        Project{' '}
+        <a href="https://github.com/hustcc/react-adsense">react-adsense</a> is a
+        React-component for Google AdSense / Baidu advertisement.
+      </p>
+
+      <h2> 1. Install </h2>
+      <pre className="strong"> npm install react-adsense </pre>
+
+      <p> Then import it. </p>
+      <pre>
+        {
+          "//import library use script tag.\n\nimport AdSense from 'react-adsense';"
+        }
+      </pre>
+
+      <h2> 2. Usage </h2>
+      <pre>
+        {
+          "import AdSense from 'react-adsense';\n\n<AdSense\n\tclient='ca-pub-7292810486004926'\n\tslot='7806394673'\n/>"
+        }
+      </pre>
+
+      <h2> 3. default props </h2>
+      <AdSense client="ca-pub-7292810486004926" slot="7806394673" />
+
+      <h2> 4. in-article layout </h2>
+      <AdSense
+        client="ca-pub-7292810486004926"
+        slot="7806394673"
+        layout="in-article"
+      />
+
+      <h2> 5. full-config Demo </h2>
+      <AdSense
+        client="ca-pub-7292810486004926"
+        slot="7806394673"
+        style={{ width: 500, height: 300, float: 'left' }}
+        layout="in-article"
+        format=""
+      />
+      <AdSense
+        client="ca-pub-7292810486004926"
+        slot="7806394673"
+        style={{ width: 500, height: 300, float: 'left' }}
+        layout="in-article"
+        format=""
+      />
+    </div>
+  );
+}

demo/demo.css → demo/index.css

@@ -1,12 +1,12 @@
- pre {
+pre {
   background-color: #f6dcd7;
   padding: 10px 15px;
 }
 pre.strong {
   font-weight: bold;
 }
 
-#wrapper {
-	max-width: 1000px;
-	margin: 0 auto;
-}
+#root {
+  max-width: 1000px;
+  margin: 0 auto;
+}

demo/index.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root') as HTMLElement).render(<App />);