Add Documentation for Next.JS based projects

mCaptcha · Feb 13, 2024 · 17868a1 · 17868a1
1 parent d66d22f
commit 17868a1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ please open an issue!
 | -------------------------------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | Vanilla JavaScript(No Framework) | [packages/vanilla](./packages/vanilla) | [![0.1.0](https://img.shields.io/badge/TypeScript_docs-master-2b7489)](https://mcaptcha.github.io/glue/vanilla) | [![NPM](https://img.shields.io/npm/v/@mcaptcha/vanilla-glue.svg)](https://www.npmjs.com/package/@mcaptcha/vanilla-glue) |
 | React JS                         | [packages/react](./packages/react)     | [![0.1.0](https://img.shields.io/badge/TypeScript_docs-master-2b7489)](https://mcaptcha.github.io/glue/react/)  | [![NPM](https://img.shields.io/npm/v/@mcaptcha/react-glue.svg)](https://www.npmjs.com/package/@mcaptcha/react-glue)     |
+| Next.JS                         | [packages/react](./packages/react)     | [![0.1.0](https://img.shields.io/badge/TypeScript_docs-master-2b7489)](https://mcaptcha.github.io/glue/react/)  | [![NPM](https://img.shields.io/npm/v/@mcaptcha/react-glue.svg)](https://www.npmjs.com/package/@mcaptcha/react-glue)     |
 | Svelte JS                        | [packages/svelte](./packages/svelte)   | [![0.1.0](https://img.shields.io/badge/TypeScript_docs-master-2b7489)](https://mcaptcha.github.io/glue/svelte/) | [![NPM](https://img.shields.io/npm/v/@mcaptcha/svelte-glue.svg)](https://www.npmjs.com/package/@mcaptcha/svelte-glue)   |
 
 ## Core library

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -20,10 +20,11 @@ npm install --save @mcaptcha/react-glue
 
 ## Usage
 
+For React based projects:
 ```tsx
 import React, { Component, WidgetConfig } from 'react'
 
-import MyComponent from 'react-glue'
+import MCaptchaWidget from 'react-glue'
 import 'react-glue/dist/index.css'
 
 class Example extends Component {
@@ -33,7 +34,25 @@ class Example extends Component {
     }
     const config: WidgetConfig = { siteKey }
 
-    return <MyComponent {...config} />
+    return <MCaptchaWidget {...config} />
   }
 }
 ```
+
+For Next.JS based projects:
+```jsx
+import React from 'react';
+import { MCaptchaWidget } from '@mcaptcha/react-glue';
+
+function Captcha() {
+    const config = {
+        widgetLink: new URL('https://yourdomain.tld/widget/?sitekey=yourstiekey')
+    };
+
+    return (
+        <MCaptchaWidget {...config} />
+    );
+}
+
+export default Captcha;
+```