Next Share

https://next-share.js.org
Admin
Next Share is a social share buttons plugin designed for Next.js, Create React App, Gatsby.js, and...
Tokens:13,263
Snippets:52
Trust Score:8.1
Update:10 months ago
Show doc for...
Tokens:
Raw
### HatenaShareButton Component

Source: https://next-share.js.org/share-buttons/hatena

This section details the `HatenaShareButton` component, its available props, and provides a code example for implementation.

```APIDOC
## HatenaShareButton Component

### Description
Provides a share button for Hatena, allowing users to share a URL with a title.

### Props
#### Children
- **children** (node) - Required - The content to be rendered inside the button, typically an icon.

#### URL
- **url** (string) - Required - The URL of the page to be shared.

#### Title
- **title** (string) - Optional - The title of the shared page.

#### Window Dimensions
- **windowWidth** (number) - Optional - The width of the new share window. Default is 660.
- **windowHeight** (number) - Optional - The height of the new share window. Default is 460.

#### Target
- **blankTarget** (boolean) - Optional - If true, opens the share window in a new tab. Default is false.

### Request Example
```jsx
import {
  HatenaShareButton,
  HatenaIcon,
} from 'next-share'

<HatenaShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <HatenaIcon size={32} round />
</HatenaShareButton>
```

### HatenaIcon Props
#### Size
- **size** (number) - Optional - The size of the icon in pixels.

#### Round
- **round** (boolean) - Optional - If true, displays a round icon. Otherwise, a rectangular icon.

#### Border Radius
- **borderRadius** (number) - Optional - Sets the rounded corners for the icon if `round` is true.

#### Background Style
- **bgStyle** (object) - Optional - Allows customization of the icon's background style.

#### Icon Fill Color
- **iconFillColor** (string) - Optional - Customizes the fill color of the icon. Defaults to 'white'.

#### Target
- **blankTarget** (boolean) - Optional - If true, opens the share window in a new tab. Default is false.
```

--------------------------------

### Mailru Share Button

Source: https://next-share.js.org/share-buttons/mailru

This section provides the code example and props for the MailruShareButton component, allowing users to share content via Mailru. It also details the props for the MailruIcon component used to style the share button.

```APIDOC
## Mailru Share Button Integration

### Description
This component allows users to share a URL and title via Mailru. It utilizes the `MailruShareButton` and `MailruIcon` components from the `next-share` library.

### Method
This is a client-side component that renders a share button.

### Endpoint
N/A (Client-side component)

### Parameters
#### MailruShareButton Props
- **children** (node) - Optional - React component, HTML element or string.
- **url** (string) - Required - The URL of the shared page.
- **title** (string) - Optional - The title of the shared page.
- **description** (string) - Optional - Description of the shared page.
- **imageUrl** (string) - Optional - Image url of the shared page.
- **windowWidth** (number) - Optional - Opened window width. Default: 660.
- **windowHeight** (number) - Optional - Opened window height. Default: 460.
- **blankTarget** (boolean) - Optional - Open share window in a new tab if set to `true`. Default: false.

#### MailruIcon Props
- **size** (number) - Optional - Icon size in pixels.
- **round** (boolean) - Optional - Show round or rectangle.
- **borderRadius** (number) - Optional - Set rounded corners if using round icon.
- **bgStyle** (object) - Optional - Customize background style.
- **iconFillColor** (string) - Optional - Customize icon fill color. Default: `white`.
- **blankTarget** (boolean) - Optional - Open share window in a new tab if set to `true`. Default: false.

### Request Example
```jsx
import {
  MailruShareButton,
  MailruIcon,
} from 'next-share'

<MailruShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <MailruIcon size={32} round />
</MailruShareButton>
```

### Response
This component does not have a direct response body as it triggers a share dialog.

#### Success Response
N/A

#### Response Example
N/A
```

--------------------------------

### Import Next Share Icons

Source: https://next-share.js.org/icons

This code snippet demonstrates how to import various social media icons from the 'next-share' library. These icons can be used to represent different sharing platforms within your application. Ensure the 'next-share' package is installed.

```javascript
import {
  EmailIcon,
  FacebookIcon,
  FacebookMessengerIcon,
  HatenaIcon,
  InstagramIcon,
  InstapaperIcon,
  LineIcon,
  LinkedinIcon,
  LivejournalIcon,
  MailruIcon,
  OKIcon,
  PinterestIcon,
  PocketIcon,
  RedditIcon,
  SpotifyIcon,
  TelegramIcon,
  TumblrIcon,
  TwitterIcon,
  ViberIcon,
  VKIcon,
  WeiboIcon,
  WhatsappIcon,
  WorkplaceIcon,
} from 'next-share'
```

--------------------------------

### TelegramShareButton Component

Source: https://next-share.js.org/share-buttons/telegram

This section describes the TelegramShareButton component, its available props, and provides a code example for its usage.

```APIDOC
## TelegramShareButton

### Description
Component for generating a Telegram share button.

### Method
N/A (Client-side component)

### Endpoint
N/A (Client-side component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import {
  TelegramShareButton,
  TelegramIcon,
} from 'next-share'

<TelegramShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TelegramIcon size={32} round />
</TelegramShareButton>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A

### Props
#### TelegramShareButton Props
- **children** (node) - Required - React component, HTML element or string.
- **url** (string) - Required - The URL of the shared page.
- **title** (string) - Optional - The title of the shared page.
- **windowWidth** (number) - Optional - Opened window width. Default: 550.
- **windowHeight** (number) - Optional - Opened window height. Default: 400.
- **blankTarget** (boolean) - Optional - Open share window in a new tab if set to `true`. Default: `false`.

#### TelegramIcon Props
- **size** (number) - Optional - Icon size in pixels.
- **round** (boolean) - Optional - Show round or rectangle.
- **borderRadius** (number) - Optional - Set rounded corners if using round icon.
- **bgStyle** (object) - Optional - Customize background style.
- **iconFillColor** (string) - Optional - Customize icon fill color. Default: `white`.
- **blankTarget** (boolean) - Optional - Open share window in a new tab if set to `true`. Default: `false`.
```

--------------------------------

### Implement Linkedin Share Button in React

Source: https://next-share.js.org/share-buttons/linkedin

This code demonstrates how to import and use the LinkedinShareButton and LinkedinIcon components from the next-share library. It requires the 'next-share' package to be installed. The button is configured with a target URL, and the icon can be customized by size and shape.

```javascript
import {
  LinkedinShareButton,
  LinkedinIcon,
} from 'next-share'

<LinkedinShareButton url={'https://github.com/next-share'}>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>
```

--------------------------------

### Implement Hatena Share Button in React

Source: https://next-share.js.org/share-buttons/hatena

This code snippet demonstrates how to import and use the HatenaShareButton and HatenaIcon components from the 'next-share' library. It shows how to set the URL and title for the shared content, and how to customize the HatenaIcon's appearance.

```jsx
import {
  HatenaShareButton,
  HatenaIcon,
} from 'next-share'

<HatenaShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <HatenaIcon size={32} round />
</HatenaShareButton>
```

--------------------------------

### Implement Pocket Share Button - JavaScript

Source: https://next-share.js.org/share-buttons/pocket

This snippet demonstrates how to implement the Pocket share button using the next-share library. It imports the necessary components and renders the button with a specified URL and title. The PocketIcon component is used for styling the button.

```javascript
import {
  PocketShareButton,
  PocketIcon,
} from 'next-share'

<PocketShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <PocketIcon size={32} round />
</PocketShareButton>
```

--------------------------------

### Gab Share Button Usage

Source: https://next-share.js.org/share-buttons/gab

Demonstrates how to implement the Gab share button with custom properties.

```APIDOC
## Gab Share Button

### Description
This component provides a share button for Gab, allowing users to share a URL and title.

### Method
N/A (Client-side component)

### Endpoint
N/A (Client-side component)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import {
  GabShareButton,
  GabIcon,
} from 'next-share'

<GabShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <GabIcon size={32} round />
</GabShareButton>
```

### Response
#### Success Response (200)
N/A (Client-side component)

#### Response Example
N/A (Client-side component)

## GabShareButton Props

Props| Type| Default| Description| Required  
---|---|---|---|---
children| node| | React component, HTML element or string.| ✅  
url| string| | The URL of the shared page.| ✅  
title| string| | Title of the shared page.| ❌  
windowWidth| number| 660| Opened window width.| ❌  
windowHeight| number| 640| Opened window height.| ❌  

## GabIcon Props

Props| Type| Default| Description| Required  
---|---|---|---|---
size| number| | Icon size in pixels.| ❌  
round| boolean| | Show round or rectangle.| ❌  
borderRadius| number| | Set rounded corners if using round icon.| ❌  
bgStyle| object| | Customize background style.| ❌  
iconFillColor| string| `white`| Customize icon fill color.| ❌  
blankTarget| boolean| false| Open share window in a new tab if set to `true`.| ❌  
```

--------------------------------

### Icon Component

Source: https://next-share.js.org/icons

This section provides the import statement for all available icons and describes the customizable props for each icon component.

```APIDOC
## Icon Component Documentation

### Description
This component allows you to easily integrate social media sharing icons into your Next.js application using the next-share.js library. It provides a wide range of icons for popular platforms and offers several props for customization.

### Import Statement
```javascript
import {
  EmailIcon,
  FacebookIcon,
  FacebookMessengerIcon,
  HatenaIcon,
  InstagramIcon,
  InstapaperIcon,
  LineIcon,
  LinkedinIcon,
  LivejournalIcon,
  MailruIcon,
  OKIcon,
  PinterestIcon,
  PocketIcon,
  RedditIcon,
  SpotifyIcon,
  TelegramIcon,
  TumblrIcon,
  TwitterIcon,
  ViberIcon,
  VKIcon,
  WeiboIcon,
  WhatsappIcon,
  WorkplaceIcon,
} from 'next-share'
```

### Props

| Props           | Type    | Default | Description                                  | Required |
| --------------- | ------- | ------- | -------------------------------------------- | -------- |
| size            | number  |         | Icon size in pixels.                         | ❌       |
| round           | boolean |         | Show round or rectangle.                     | ❌       |
| borderRadius    | number  |         | Set rounded corners if using round icon.     | ❌       |
| bgStyle         | object  |         | Customize background style.                  | ❌       |
| iconFillColor   | string  | `white` | Customize icon fill color.                 | ❌       |
| blankTarget     | boolean | `false` | Open share window in a new tab if set to `true`. | ❌       |
```

--------------------------------

### Implement Reddit Share Button in Next.js

Source: https://next-share.js.org/share-buttons/reddit

This snippet demonstrates how to import and use the RedditShareButton and RedditIcon components from the next-share library. It shows how to configure the URL and title for the shared content, and customize the appearance of the Reddit icon.

```jsx
import {
  RedditShareButton,
  RedditIcon,
} from 'next-share'

<RedditShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <RedditIcon size={32} round />
</RedditShareButton>
```

--------------------------------

### Display Pinterest Share Count using next-share

Source: https://next-share.js.org/share-counts/pinterest

Demonstrates how to use the PinterestShareCount component from next-share to display the share count for a given URL. It supports rendering the raw count or using a child component for custom display.

```javascript
import { PinterestShareCount } from 'next-share'
 
<PinterestShareCount url={'https://github.com/next-share'} />
 
<PinterestShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</PinterestShareCount>
```

--------------------------------

### Pinterest Share Button Implementation in React

Source: https://next-share.js.org/share-buttons/pinterest

This snippet demonstrates how to implement a Pinterest share button using the `PinterestShareButton` and `PinterestIcon` components from the `next-share` library. It requires the `url`, `media`, and `children` props for the button, and `size` for the icon. The `PinterestIcon` component can be customized with props like `round` and `bgStyle`.

```javascript
import {
  PinterestShareButton,
  PinterestIcon,
} from 'next-share'

<PinterestShareButton
  url={'https://github.com/next-share'}
  media={'next-share is a social share buttons for your next React apps.'}
>
  <PinterestIcon size={32} round />
</PinterestShareButton>
```

--------------------------------

### Display Hatena Share Count using next-share

Source: https://next-share.js.org/share-counts/hatena

This code snippet demonstrates how to use the HatenaShareCount component from the next-share library to display the share count for a given URL. It shows both basic rendering and a more advanced usage where a custom React component is passed as a child to render the share count.

```javascript
import { HatenaShareCount } from 'next-share'

<HatenaShareCount url={'https://github.com/next-share'} />

<HatenaShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</HatenaShareCount>
```

--------------------------------

### Implement Line Share Button in React

Source: https://next-share.js.org/share-buttons/line

This snippet demonstrates how to import and use the LineShareButton and LineIcon components from the 'next-share' library. It shows how to configure the button with a URL and title for sharing. Dependencies include the 'next-share' library. The component renders a clickable button that, when activated, opens a Line sharing dialog.

```jsx
import {
  LineShareButton,
  LineIcon,
} from 'next-share'

<LineShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <LineIcon />
</LineShareButton>
```

--------------------------------

### Workplace Share Button Implementation (React)

Source: https://next-share.js.org/share-buttons/workplace

This snippet demonstrates how to implement a Workplace share button using the next-share.js library in a React application. It requires the `WorkplaceShareButton` and `WorkplaceIcon` components. The button is configured with a URL and an optional quote.

```jsx
import {
  WorkplaceShareButton,
  WorkplaceIcon,
} from 'next-share'

<WorkplaceShareButton
  url={'https://github.com/next-share'}
  quote={'Next Share'}
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>
```

--------------------------------

### Implement Livejournal Share Button and Icon in React

Source: https://next-share.js.org/share-buttons/livejournal

This snippet demonstrates how to import and use the LivejournalShareButton and LivejournalIcon components from 'next-share'. It shows basic usage with required props like URL and title, and how to nest the icon within the button. The component allows customization of window size and target.

```javascript
import {
  LivejournalShareButton,
  LivejournalIcon,
} from 'next-share'

<LivejournalShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
  description={'https://github.com/next-share'}
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>
```

--------------------------------

### Display OK Share Count using React Component

Source: https://next-share.js.org/share-counts/ok

Demonstrates how to use the OKShareCount component from the next-share library to display the share count for a given URL. It shows both a simple usage and a more advanced usage where the share count is rendered within a custom React component. This component requires the 'next-share' package.

```javascript
import { OKShareCount } from 'next-share'

<OKShareCount url={'https://github.com/next-share'} />

<OKShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</OKShareCount>
```

--------------------------------

### Implement Mailru Share Button with Icon (JavaScript/TypeScript)

Source: https://next-share.js.org/share-buttons/mailru

This snippet demonstrates how to use the MailruShareButton and MailruIcon components from 'next-share' to create a share button. It requires the 'next-share' library. The button shares a specified URL and title, and the icon can be customized with size and shape.

```javascript
import {
  MailruShareButton,
  MailruIcon,
} from 'next-share'

<MailruShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <MailruIcon size={32} round />
</MailruShareButton>
```

--------------------------------

### Reddit Share Button Component

Source: https://next-share.js.org/share-buttons/reddit

This section describes the RedditShareButton component, its purpose, and its available props for customizing the Reddit sharing functionality.

```APIDOC
## RedditShareButton Component

### Description

The `RedditShareButton` component provides a pre-configured button to share content on Reddit. It wraps the sharing logic and accepts props to customize the shared content and behavior.

### Method

N/A (Client-side component)

### Endpoint

N/A (Client-side component)

### Parameters

#### Props for `RedditShareButton`

- **children** (node) - Optional - The content to be rendered inside the button, typically an icon or text.
- **url** (string) - Required - The URL of the page to be shared.
- **title** (string) - Optional - The title of the shared page on Reddit.
- **windowWidth** (number) - Optional - The width of the popup window for sharing. Defaults to 660.
- **windowHeight** (number) - Optional - The height of the popup window for sharing. Defaults to 460.
- **blankTarget** (boolean) - Optional - If true, the share window will open in a new tab. Defaults to false.

#### Props for `RedditIcon` (often used as children)

- **size** (number) - Optional - The size of the icon in pixels.
- **round** (boolean) - Optional - If true, the icon will be rendered with rounded corners.
- **borderRadius** (number) - Optional - Sets the border radius for rounded corners if `round` is true.
- **bgStyle** (object) - Optional - Allows customization of the background style of the icon.
- **iconFillColor** (string) - Optional - The fill color for the icon. Defaults to 'white'.
- **blankTarget** (boolean) - Optional - If true, the share window will open in a new tab. Defaults to false.

### Request Example

```jsx
import {
  RedditShareButton,
  RedditIcon,
} from 'next-share';

<RedditShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <RedditIcon size={32} round />
</RedditShareButton>
```

### Response

N/A (Client-side component, handles its own UI interactions)
```

--------------------------------

### Implement Tumblr Share Button in React with next-share

Source: https://next-share.js.org/share-buttons/tumblr

This code snippet demonstrates how to use the TumblrShareButton and TumblrIcon components from the next-share library to create a share button. It requires the 'next-share' package and renders a button that allows users to share a specified URL and title on Tumblr. The component accepts various props to customize the sharing experience.

```javascript
import {
  TumblrShareButton,
  TumblrIcon,
} from 'next-share'

<TumblrShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TumblrIcon size={32} round />
</TumblrShareButton>
```

--------------------------------

### Implement Email Share Button with Next-Share JS

Source: https://next-share.js.org/share-buttons/email

This code snippet demonstrates how to use the EmailShareButton and EmailIcon components from the 'next-share' library to create a functional email sharing button. It requires the 'next-share' package and renders an email icon that, when clicked, opens a new email with pre-filled subject and body.

```javascript
import {
  EmailShareButton,
  EmailIcon,
} from 'next-share'

<EmailShareButton
  url={'https://github.com/next-share'}
  subject={'Next Share'}
  body="body"
>
  <EmailIcon size={32} round />
</EmailShareButton>
```

--------------------------------

### PocketShareButton

Source: https://next-share.js.org/share-buttons/pocket

The PocketShareButton component allows users to share a URL to Pocket. It accepts various props for customization and can include child elements like icons.

```APIDOC
## PocketShareButton

### Description
This component generates a share button that allows users to share a URL to Pocket. It can be customized with a title, window dimensions, and target behavior.

### Method
This is a React component, not a direct API endpoint.

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
This component does not use a request body. Props are passed directly.

#### Props
- **children** (node) - Required - Can be a React component, HTML element, or string. Typically used for the button's content, like an icon.
- **url** (string) - Required - The URL of the page to be shared.
- **title** (string) - Optional - The title of the shared page. Pocket may override this if a title tag is present on the shared page.
- **windowWidth** (number) - Optional - The width of the share window (default: 500).
- **windowHeight** (number) - Optional - The height of the share window (default: 500).
- **blankTarget** (boolean) - Optional - If `true`, the share window opens in a new tab (default: `false`).

### Request Example
```jsx
import { PocketShareButton, PocketIcon } from 'next-share';

<PocketShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <PocketIcon size={32} round />
</PocketShareButton>
```

### Response
This component renders a share button and does not return a specific response body. Its action is to open a share dialog.

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Display VK Share Count using VKShareCount Component

Source: https://next-share.js.org/share-counts/vk

This snippet demonstrates how to use the VKShareCount component from the next-share library. It shows two ways to use the component: one directly passing the URL and another using a render prop to display the share count within a custom element. The 'url' prop is required.

```jsx
import { VKShareCount } from 'next-share'

<VKShareCount url={'https://github.com/next-share'} />

<VKShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</VKShareCount>
```

--------------------------------

### Implement VK Share Button in Next.js

Source: https://next-share.js.org/share-buttons/vk

This snippet demonstrates how to integrate a VK share button into a Next.js application. It requires importing the VKShareButton and VKIcon components from 'next-share'. The button takes a URL and an optional image for sharing, and displays a VK icon with customizable size and shape.

```jsx
import {
  VKShareButton,
  VKIcon,
} from 'next-share'

<VKShareButton
  url={'https://github.com/next-share'}
  image={'./next-share.png'}
>
  <VKIcon size={32} round />
</VKShareButton>
```

--------------------------------

### Configure Open Graph Meta Tags for Sharing

Source: https://next-share.js.org/share-buttons/linkedin

These meta tags are used to control how shared content appears on platforms like Linkedin. They should be placed within the `<head>` section of your HTML. Proper configuration requires setting the 'og:image', 'og:title', and 'og:description' properties with relevant content.

```html
<meta property='og:image' content='' />
<meta property='og:title' content='' />
<meta property='og:description' content='' />
```

--------------------------------

### Implement Whatsapp Share Button in React

Source: https://next-share.js.org/share-buttons/whatsapp

This snippet shows how to integrate the WhatsappShareButton and WhatsappIcon components into a React application. It requires the 'next-share' library. The button shares a specified URL and title via Whatsapp. Key props include 'url', 'title', and 'separator'.

```javascript
import {
  WhatsappShareButton,
  WhatsappIcon,
} from 'next-share'

<WhatsappShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
  separator=":: "
>
  <WhatsappIcon size={32} round />
</WhatsappShareButton>
```

--------------------------------

### Implement Gab Share Button using Next Share (React)

Source: https://next-share.js.org/share-buttons/gab

This snippet shows how to import and use the GabShareButton component from the 'next-share' library in a React application. It requires the 'url' and 'title' props for the button and allows for custom children like the GabIcon. The GabIcon component can be customized with size and roundness.

```jsx
import {
  GabShareButton,
  GabIcon,
} from 'next-share'

<GabShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <GabIcon size={32} round />
</GabShareButton>
```

--------------------------------

### Implement Instapaper Share Button with React

Source: https://next-share.js.org/share-buttons/instapaper

This code demonstrates how to use the InstapaperShareButton and InstapaperIcon components from the next-share library. It requires importing the components and then using them with the URL and title of the content to be shared. The children prop accepts any valid React node for the button's content.

```javascript
import {
  InstapaperShareButton,
  InstapaperIcon,
} from 'next-share'

<InstapaperShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <InstapaperIcon size={32} round />
</InstapaperShareButton>
```

--------------------------------

### EmailShareButton Component

Source: https://next-share.js.org/share-buttons/email

This section describes the EmailShareButton component, which allows users to share a URL via email. It details the necessary props for configuring the share button, such as the URL, subject, and body of the email.

```APIDOC
## EmailShareButton API

### Description
Provides a button to initiate an email sharing intent with pre-filled content.

### Method
Not applicable (Client-side React component)

### Endpoint
Not applicable (Client-side React component)

### Parameters
#### Props
- **children** (node) - Required - The content of the share button (e.g., text or an icon).
- **url** (string) - Required - The URL to be shared in the email body.
- **subject** (string) - Optional - The subject line of the email.
- **body** (string) - Optional - The main content/body of the email.
- **separator** (string) - Optional - The separator used between URL and other content in the email body.
- **blankTarget** (boolean) - Optional - Defaults to `false`. If `true`, opens the email client in a new tab.

### Request Example
```jsx
<EmailShareButton url="https://github.com/next-share" subject="Next Share" body="Check out this link!">
  Share via Email
</EmailShareButton>
```

### Response
#### Success Response
This component does not have a direct success/error response as it triggers the user's default email client.

#### Response Example
Not applicable.
```

--------------------------------

### LivejournalShareButton

Source: https://next-share.js.org/share-buttons/livejournal

The LivejournalShareButton component provides a convenient way to add a Livejournal sharing button to your website. It accepts various props to customize the shared content and the behavior of the sharing window.

```APIDOC
## LivejournalShareButton

### Description
This component renders a share button for Livejournal. Users can share a URL along with an optional title and description.

### Method
React Component

### Endpoint
N/A (Client-side component)

### Parameters
#### Props
- **children** (node) - Optional - React component, HTML element or string to be rendered as the button content.
- **url** (string) - Required - The URL of the page to be shared.
- **title** (string) - Optional - The title of the shared page.
- **description** (string) - Optional - Description of the shared page.
- **windowWidth** (number) - Optional - Opened window width. Defaults to 660.
- **windowHeight** (number) - Optional - Opened window height. Defaults to 460.
- **blankTarget** (boolean) - Optional - Open share window in a new tab if set to `true`. Defaults to `false`.

### Request Example
```jsx
import {
  LivejournalShareButton,
  LivejournalIcon,
} from 'next-share'

<LivejournalShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
  description={'https://github.com/next-share'}
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>
```

### Response
#### Success Response
N/A (This is a UI component)

#### Response Example
N/A
```

--------------------------------

### LineShareButton Component

Source: https://next-share.js.org/share-buttons/line

This section details the LineShareButton component, including its props for customization and usage within a React application.

```APIDOC
## LineShareButton Component

### Description

Provides a pre-built React component to easily add Line sharing functionality to your website.

### Method

N/A (Client-side component)

### Endpoint

N/A (Client-side component)

### Parameters

#### Props for LineShareButton

- **children** (node) - Required - React component, HTML element, or string to be rendered as the button content.
- **url** (string) - Required - The URL of the page to be shared.
- **title** (string) - Optional - The title of the shared page.
- **windowWidth** (number) - Optional - The width of the share window. Defaults to 500.
- **windowHeight** (number) - Optional - The height of the share window. Defaults to 500.
- **blankTarget** (boolean) - Optional - If true, opens the share window in a new tab. Defaults to false.

#### Props for LineIcon (when used as children)

- **size** (number) - Optional - Icon size in pixels.
- **round** (boolean) - Optional - If true, displays a round icon. Otherwise, a rectangle.
- **borderRadius** (number) - Optional - Sets the border radius for round icons.
- **bgStyle** (object) - Optional - Allows customization of the background style.
- **iconFillColor** (string) - Optional - Customizes the fill color of the icon. Defaults to 'white'.
- **blankTarget** (boolean) - Optional - If true, opens the share window in a new tab. Defaults to false.

### Request Example

```jsx
import {
  LineShareButton,
  LineIcon,
} from 'next-share';

<LineShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <LineIcon size={32} round />
</LineShareButton>
```

### Response

This component does not have a direct API response as it's a client-side UI element. The action triggers a Line share intent.
```

--------------------------------

### Weibo Share Button Integration with Next Share JS

Source: https://next-share.js.org/share-buttons/weibo

This code snippet demonstrates how to import and use the WeiboShareButton and WeiboIcon components from the 'next-share' library in a React application. It shows how to pass the URL, title, and image for the shared content. The WeiboIcon component is used as a child to render the actual share icon with customizable size and shape.

```javascript
import {
  WeiboShareButton,
  WeiboIcon,
} from 'next-share'

<WeiboShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
  image={`${example-image}`}
>
  <WeiboIcon size={32} round />
</WeiboShareButton>
```

--------------------------------

### Implement Facebook Share Button with Next Share JS

Source: https://next-share.js.org/share-buttons/facebook

This snippet shows how to integrate the `FacebookShareButton` and `FacebookIcon` components into a Next.js application. It requires importing the components from 'next-share'. The button takes a URL, quote, and hashtag as props to customize the shared content.

```jsx
import {
  FacebookShareButton,
  FacebookIcon,
} from 'next-share'

<FacebookShareButton
  url={'https://github.com/next-share'}
  quote={'next-share is a social share buttons for your next React apps.'}
  hashtag={'#nextshare'}
>
  <FacebookIcon size={32} round />
</FacebookShareButton>
```

--------------------------------

### WorkplaceShareButton Component

Source: https://next-share.js.org/share-buttons/workplace

The WorkplaceShareButton component allows users to easily share a URL on Workplace. It accepts various props to customize the sharing experience.

```APIDOC
## WorkplaceShareButton

### Description
Component for sharing content on Workplace.

### Method
N/A (This is a React component, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Props
- **children** (node) - Required - The content to be rendered inside the button, typically an icon or text.
- **url** (string) - Required - The URL of the page to be shared.
- **quote** (string) - Optional - A pre-defined quote to be shared with the URL.
- **hashtag** (string) - Optional - A hashtag to be included in the share.
- **windowWidth** (number) - Optional - The width of the popup window for sharing. Defaults to 550.
- **windowHeight** (number) - Optional - The height of the popup window for sharing. Defaults to 400.
- **blankTarget** (boolean) - Optional - If true, the share window will open in a new tab. Defaults to false.

### Request Example
```jsx
import { WorkplaceShareButton, WorkplaceIcon } from 'next-share'

<WorkplaceShareButton 
  url={'https://github.com/next-share'} 
  quote={'Next Share'}
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>
```

### Response
N/A (This component renders UI elements and triggers a share action.)
```

--------------------------------

### EmailIcon Component

Source: https://next-share.js.org/share-buttons/email

This section details the EmailIcon component, which is used to display an email icon. It outlines the available props for customizing the icon's appearance, such as size and shape.

```APIDOC
## EmailIcon API

### Description
Displays a customizable email icon.

### Method
Not applicable (Client-side React component)

### Endpoint
Not applicable (Client-side React component)

### Parameters
#### Props
- **size** (number) - Optional - The size of the icon in pixels.
- **round** (boolean) - Optional - If `true`, displays a round icon; otherwise, a rectangle.
- **borderRadius** (number) - Optional - Sets the border radius for rounded icons.
- **bgStyle** (object) - Optional - Allows customization of the icon's background style.
- **iconFillColor** (string) - Optional - Defaults to 'white'. Sets the fill color of the icon.
- **blankTarget** (boolean) - Optional - Defaults to `false`. If `true`, opens the email client in a new tab.

### Request Example
```jsx
<EmailIcon size={32} round={true} iconFillColor="#333" />
```

### Response
#### Success Response
This component renders an icon and does not have a direct success/error response.

#### Response Example
Not applicable.
```

--------------------------------

### Implement Telegram Share Button in React

Source: https://next-share.js.org/share-buttons/telegram

This snippet demonstrates how to import and use the TelegramShareButton and TelegramIcon components. It requires the 'next-share' library. The button takes a URL and an optional title as props, and renders a Telegram icon.

```javascript
import {
  TelegramShareButton,
  TelegramIcon,
} from 'next-share'

<TelegramShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TelegramIcon size={32} round />
</TelegramShareButton>
```

--------------------------------

### PocketIcon

Source: https://next-share.js.org/share-buttons/pocket

The PocketIcon component is used to display the Pocket icon, which can be customized in size, shape, and color.

```APIDOC
## PocketIcon

### Description
This component renders the Pocket icon, offering various props for customization such as size, roundness, background style, and fill color.

### Method
This is a React component, not a direct API endpoint.

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
This component does not use a request body. Props are passed directly.

#### Props
- **size** (number) - Optional - The size of the icon in pixels.
- **round** (boolean) - Optional - If `true`, displays a round icon; otherwise, a rectangle (default: `false`).
- **borderRadius** (number) - Optional - Sets the rounded corners when using a round icon.
- **bgStyle** (object) - Optional - Allows customization of the background style.
- **iconFillColor** (string) - Optional - Customizes the fill color of the icon (default: `white`).
- **blankTarget** (boolean) - Optional - If `true`, the share window opens in a new tab (default: `false`).

### Request Example
```jsx
import { PocketIcon } from 'next-share';

<PocketIcon size={32} round />
```

### Response
This component renders an SVG icon and does not return a specific response body.

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### WorkplaceIcon Component

Source: https://next-share.js.org/share-buttons/workplace

The WorkplaceIcon component is used to display the Workplace sharing icon. It can be customized with various props.

```APIDOC
## WorkplaceIcon

### Description
Component for displaying the Workplace share icon.

### Method
N/A (This is a React component, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Props
- **size** (number) - Optional - The size of the icon in pixels.
- **round** (boolean) - Optional - If true, the icon will have a round shape. Otherwise, it will be rectangular.
- **borderRadius** (number) - Optional - Sets the border-radius for round icons.
- **bgStyle** (object) - Optional - Allows customization of the background style of the icon.
- **iconFillColor** (string) - Optional - Customizes the fill color of the icon. Defaults to 'white'.
- **blankTarget** (boolean) - Optional - If true, the share window will open in a new tab. Defaults to false.

### Request Example
```jsx
import { WorkplaceIcon } from 'next-share'

<WorkplaceIcon size={32} round />
```

### Response
N/A (This component renders a UI element.)
```

--------------------------------

### VKShareButton

Source: https://next-share.js.org/share-buttons/vk

The VKShareButton component allows users to easily share content on VK. It accepts various props to customize the shared URL, image, title, and window behavior.

```APIDOC
## VKShareButton Component

### Description
Provides a button to share content on VKontakte (VK). It can be customized with a URL, image, and title.

### Method
This is a React component, not an HTTP endpoint.

### Endpoint
N/A

### Parameters
#### Props for VKShareButton
- **children** (node) - Required - React component, HTML element or string to be rendered inside the button.
- **url** (string) - Required - The URL of the page to be shared.
- **image** (string) - Optional - An absolute link to the image that will be shared.
- **title** (string) - Optional - The title of the shared page.
- **noParse** (boolean) - Optional - If true, VK will not retrieve URL information. Defaults to false.
- **noVkLinks** (boolean) - Optional - If true, no links to the user's profile will appear in the open window (mobile only). Defaults to false.
- **windowWidth** (number) - Optional - The width of the share window. Defaults to 660.
- **windowHeight** (number) - Optional - The height of the share window. Defaults to 460.
- **blankTarget** (boolean) - Optional - If true, the share window opens in a new tab. Defaults to false.

#### Props for VKIcon (when used as a child)
- **size** (number) - Optional - Icon size in pixels.
- **round** (boolean) - Optional - Whether to display a round icon. Defaults to false.
- **borderRadius** (number) - Optional - Sets rounded corners if using a round icon.
- **bgStyle** (object) - Optional - Customize the background style of the icon.
- **iconFillColor** (string) - Optional - Customize the icon fill color. Defaults to 'white'.
- **blankTarget** (boolean) - Optional - If true, the share window opens in a new tab. Defaults to false.

### Request Example
```jsx
import { VKShareButton, VKIcon } from 'next-share';

<VKShareButton url={'https://example.com'} image={'./path/to/image.png'} title={'Share this page!'}>
  <VKIcon size={32} round />
</VKShareButton>
```

### Response
This component renders a share button. The 'response' is the UI element itself and user interaction actions, not a typical API response.

#### Success Response
N/A (UI Component)

#### Response Example
N/A (UI Component)
```

--------------------------------

### Implement Twitter Share Button in React with next-share

Source: https://next-share.js.org/share-buttons/twitter

This snippet demonstrates how to use the TwitterShareButton and TwitterIcon components from the 'next-share' library to create a shareable link for Twitter. It requires importing the components and passing the URL and title as props. The TwitterIcon component can be customized with size and roundness.

```javascript
import {
  TwitterShareButton,
  TwitterIcon,
} from 'next-share'

<TwitterShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TwitterIcon size={32} round />
</TwitterShareButton>
```

--------------------------------

### OKShareCount Component

Source: https://next-share.js.org/share-counts/ok

The OKShareCount component from next-share allows you to easily display the share count for a specified URL. It can be used with or without a custom render prop for the share count.

```APIDOC
## OKShareCount Component

### Description
This component fetches and displays the share count for a given URL using the OK platform. It can be used as a simple display component or with a render prop for custom formatting of the share count.

### Method
This is a React component, not an HTTP endpoint.

### Endpoint
N/A

### Parameters
#### Props
- **url** (string) - Required - The URL of the page for which to fetch the share count.
- **children** (node) - Optional - A render prop that receives the share count and allows custom rendering.

### Request Example
```jsx
import { OKShareCount } from 'next-share';

// Basic usage
<OKShareCount url={'https://github.com/next-share'} />

// Usage with render prop
<OKShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</OKShareCount>
```

### Response
#### Success Response (Rendered Output)
- The component will render the share count or its children if provided.

#### Response Example
```html
<!-- Basic usage output might be just the number -->
<span>123</span>

<!-- With children -->
<span className="wrapper">123</span>
```
```

--------------------------------

### Display Tumblr Share Count using next-share

Source: https://next-share.js.org/share-counts/tumblr

This snippet demonstrates how to use the TumblrShareCount component from the next-share library to fetch and display the share count for a given URL. It shows both a basic implementation and a more advanced one using a render prop to customize the output.

```javascript
import { TumblrShareCount } from 'next-share'
 
<TumblrShareCount url={'https://github.com/next-share'} />
 
<TumblrShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</TumblrShareCount>
```
Tokens:
Raw