### WhatsappShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example usage of the WhatsappShareButton component.

```jsx
import { WhatsappShareButton, WhatsappIcon } from "react-share";

<WhatsappShareButton title="Read this next" url={shareUrl} aria-label="Share on WhatsApp">
  <WhatsappIcon size={32} round />
</WhatsappShareButton>;
```

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

### Icon Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example of using an icon component like XIcon.

```jsx
import { XIcon } from "react-share";

<XIcon aria-hidden="true" size={32} round />;
```

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

### FacebookShareCount Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Basic example of using the FacebookShareCount component.

```jsx
<FacebookShareCount url={shareUrl} />
```

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

### Install react-share

Source: https://github.com/nygardk/react-share/blob/master/README.md

Command to install the react-share package using npm.

```shell
npm install react-share
```

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

### WhatsappShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of using the WhatsappShareButton to share content via WhatsApp.

```typescript
import { WhatsappShareButton, WhatsappIcon } from 'react-share';

<WhatsappShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on WhatsApp"
>
  <WhatsappIcon size={32} round />
</WhatsappShareButton>
```

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

### FacebookShareButton Basic Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Basic example of using FacebookShareButton with FacebookIcon.

```jsx
import { FacebookShareButton, FacebookIcon } from "react-share";

<FacebookShareButton url={shareUrl} aria-label="Share this page on Facebook">
  <FacebookIcon size={32} round />
</FacebookShareButton>;
```

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

### WeiboShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example usage of the WeiboShareButton component with optional props.

```jsx
import { WeiboShareButton, WeiboIcon } from "react-share";

<WeiboShareButton
  title="Read this next"
  image={imageUrl}
  url={shareUrl}
  aria-label="Share on Weibo"
>
  <WeiboIcon size={32} round />
</WeiboShareButton>;
```

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

### WorkplaceShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example usage of the WorkplaceShareButton component with optional props.

```jsx
import { WorkplaceShareButton, WorkplaceIcon } from "react-share";

<WorkplaceShareButton
  quote="Worth a read"
  hashtag="#reactshare"
  url={shareUrl}
  aria-label="Share on Workplace"
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>;
```

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

### TypeScript Strict Types Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example demonstrating type-safe custom components with strict TypeScript.

```typescript
import { FacebookShareButton } from 'react-share';
import type { ShareButtonProps } from 'react-share'; // If exported

// Type-safe custom component
const CustomShareButton: React.FC<{ 
  url: string;
  title?: string;
}> = ({ url, title }) => (
  <FacebookShareButton url={url}>
    {title}
  </FacebookShareButton>
);
```

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

### WeiboShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of using the WeiboShareButton to share content to Weibo.

```typescript
import { WeiboShareButton, WeiboIcon } from 'react-share';

<WeiboShareButton
  title="Check this out"
  image="https://example.com/image.jpg"
  url="https://example.com"
  aria-label="Share on Weibo"
>
  <WeiboIcon size={32} round />
</WeiboShareButton>
```

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

### XShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example of using XShareButton with custom title and htmlTitle.

```jsx
import { XShareButton, XIcon } from "react-share";

<XShareButton
  title="Share title sent to X"
  htmlTitle="Native button tooltip"
  url={shareUrl}
  aria-label="Share on X"
>
  <XIcon size={32} round />
</XShareButton>;
```

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

### TypeScript Generic Props Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example showing how to use generics for platform-specific props in TypeScript.

```typescript
import { type ShareButtonProps } from 'react-share';

type CustomProps = ShareButtonProps<{
  title?: string;
}>;
```

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

### ViberShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of using the ViberShareButton to share content via Viber.

```typescript
import { ViberShareButton, ViberIcon } from 'react-share';

<ViberShareButton
  title="Check this"
  url="https://example.com"
  aria-label="Share on Viber"
>
  <ViberIcon size={32} round />
</ViberShareButton>
```

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

### Basic Icon Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example of how to use the IconBase component with a basic SVG path.

```jsx
import IconBase from 'react-share/icons/IconBase';

<IconBase color="#0866FF" size={32}>
  <path d="M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z" />
</IconBase>
```

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

### PocketShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the PocketShareButton component for saving articles to Pocket.

```typescript
import { PocketShareButton, PocketIcon } from 'react-share';

<PocketShareButton
  title="Interesting article"
  url="https://example.com"
  aria-label="Save to Pocket"
>
  <PocketIcon size={32} round />
</PocketShareButton>
```

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

### Custom Background Styling Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example of applying custom styles to the background shape using 'bgStyle'.

```jsx
<IconBase 
  color="#0866FF" 
  size={32}
  bgStyle={{ 
    opacity: 0.8,
    filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.2))'
  }}
>
  <path d="M34.1,47V33.3..." />
</IconBase>
```

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

### LiveJournal Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the LiveJournal Share Button with its props.

```typescript
import { LivejournalShareButton, LivejournalIcon } from 'react-share';

<LivejournalShareButton
  title="Great post"
  description="Check out this amazing article"
  url="https://example.com"
  aria-label="Share on LiveJournal"
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>
```

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

### Hatena Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Hatena Share Button with its props.

```typescript
import { HatenaShareButton, HatenaIcon } from 'react-share';

<HatenaShareButton
  title="Read this"
  url="https://example.com"
  aria-label="Share on Hatena"
>
  <HatenaIcon size={32} round />
</HatenaShareButton>
```

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

### Line Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Line Share Button with its props.

```typescript
import { LineShareButton, LineIcon } from 'react-share';

<LineShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on Line"
>
  <LineIcon size={32} round />
</LineShareButton>
```

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

### BlueskyShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the BlueskyShareButton component with BlueskyIcon.

```typescript
import { BlueskyShareButton, BlueskyIcon } from 'react-share';

<BlueskyShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on Bluesky"
>
  <BlueskyIcon size={32} round />
</BlueskyShareButton>
```

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

### Icon with Custom Styling

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example demonstrating custom styling for an X icon.

```typescript
import { XIcon } from 'react-share';

<XIcon 
  size={48} 
  round 
  bgStyle={{ fill: '#1DA1F2' }}
  iconFillColor="#ffffff"
  className="custom-icon"
/>
```

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

### Icon Sizing

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Examples of configuring icon size using pixels, CSS strings, or the default value.

```typescript
// Pixel size
<FacebookIcon size={32} />

// String size (CSS)
<FacebookIcon size="2rem" />

// Default size
<FacebookIcon />  // 64px
```

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

### Pinterest Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the PinterestShareButton component with required media and optional description and pinId.

```typescript
<PinterestShareButton 
  url={url}
  media="https://example.com/image.jpg"  // Required
  description="Pin description"           // Optional
  pinId="EXISTING_PIN_ID"                // Optional, for repins
>
  <PinterestIcon />
</PinterestShareButton>
```

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

### OKShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the OKShareButton component for sharing content on Odnoklassniki (OK.ru).

```typescript
import { OKShareButton, OKIcon } from 'react-share';

<OKShareButton
  title="Article title"
  description="Article description"
  image="https://example.com/image.jpg"
  url="https://example.com"
  aria-label="Share on OK"
>
  <OKIcon size={32} round />
</OKShareButton>
```

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

### XIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the XIcon component.

```typescript
import { XIcon } from 'react-share';
<XIcon size={32} round />
```

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

### FacebookShareCount Custom Rendering Example

Source: https://github.com/nygardk/react-share/blob/master/README.md

Example of custom rendering for FacebookShareCount using a render prop.

```jsx
<FacebookShareCount url={shareUrl}>
  {(shareCount) => <span className="myShareCountWrapper">{shareCount}</span>}
</FacebookShareCount>
```

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

### Gab Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Gab Share Button with its props.

```typescript
import { GabShareButton, GabIcon } from 'react-share';

<GabShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on Gab"
>
  <GabIcon size={32} round />
</GabShareButton>
```

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

### VKShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of using the VKShareButton to share content to VK (VKontakte).

```typescript
import { VKShareButton, VKIcon } from 'react-share';

<VKShareButton
  title="Article title"
  image="https://example.com/image.jpg"
  url="https://example.com"
  noParse
  noVkLinks
  aria-label="Share on VK"
>
  <VKIcon size={32} round />
</VKShareButton>
```

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

### FacebookShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the FacebookShareButton component with FacebookIcon.

```typescript
import { FacebookShareButton, FacebookIcon } from 'react-share';

<FacebookShareButton
  hashtag="#reactshare"
  url="https://example.com"
  aria-label="Share on Facebook"
>
  <FacebookIcon size={32} round />
</FacebookShareButton>
```

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

### FacebookMessengerShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the FacebookMessengerShareButton component with FacebookMessengerIcon.

```typescript
import { FacebookMessengerShareButton, FacebookMessengerIcon } from 'react-share';

<FacebookMessengerShareButton
  appId="YOUR_APP_ID"
  url="https://example.com"
  aria-label="Send in Messenger"
>
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>
```

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

### EmailShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the EmailShareButton component with EmailIcon.

```typescript
import { EmailShareButton, EmailIcon } from 'react-share';

<EmailShareButton
  subject="Check this out"
  body="I found something interesting:"
  url="https://example.com"
  aria-label="Share by email"
>
  <EmailIcon size={32} round />
</EmailShareButton>
```

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

### PocketIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the PocketIcon component.

```typescript
import { PocketIcon } from 'react-share';
<PocketIcon size={32} round />
```

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

### Creating Custom Icons

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Instructions and example for creating a new custom icon component.

```jsx
import IconBase, { type IconProps } from 'react-share/icons/IconBase';

export function MyCustomIcon(props: IconProps) {
  return (
    <IconBase color="#FF6B6B" {...props}>
      {/* Your SVG path elements */}
      <path d="M32,16 L48,48 L16,48 Z" />
    </IconBase>
  );
}
```

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

### OKIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the OKIcon component.

```typescript
import { OKIcon } from 'react-share';
<OKIcon size={32} round />
```

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

### Pinterest with Media

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Example of sharing an image on Pinterest with a URL, media URL, and description.

```typescript
<PinterestShareButton
  url={url}
  media="https://example.com/image.jpg"
  description="Check out this image"
  aria-label="Pin on Pinterest"
>
  <PinterestIcon size={32} round />
</PinterestShareButton>
```

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

### PinterestShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the PinterestShareButton component for pinning images on Pinterest.

```typescript
import { PinterestShareButton, PinterestIcon } from 'react-share';

<PinterestShareButton
  media="https://example.com/image.jpg"
  description="Pin description"
  url="https://example.com"
  aria-label="Pin on Pinterest"
>
  <PinterestIcon size={32} round />
</PinterestShareButton>
```

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

### TumblrShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of how to use the TumblrShareButton component to share content to Tumblr.

```typescript
import { TumblrShareButton, TumblrIcon } from 'react-share';

<TumblrShareButton
  title="Great post"
  caption="Here's what I thought"
  tags={["react", "javascript"]}
  url="https://example.com"
  aria-label="Share on Tumblr"
>
  <TumblrIcon size={32} round />
</TumblrShareButton>
```

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

### Instapaper Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Instapaper Share Button with its props.

```typescript
import { InstapaperShareButton, InstapaperIcon } from 'react-share';

<InstapaperShareButton
  title="Great article"
  description="A summary of the article"
  url="https://example.com"
  aria-label="Save to Instapaper"
>
  <InstapaperIcon size={32} round />
</InstapaperShareButton>
```

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

### LinkedIn Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the LinkedIn Share Button with its props.

```typescript
import { LinkedinShareButton, LinkedinIcon } from 'react-share';

<LinkedinShareButton
  title="Interesting article"
  summary="Quick summary of content"
  source="example.com"
  url="https://example.com"
  aria-label="Share on LinkedIn"
>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>
```

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

### Window Positioning

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Examples of how to center the share popup relative to the browser window or the entire screen.

```typescript
// Center relative to browser window (default)
<FacebookShareButton url={url} windowPosition="windowCenter">
  <FacebookIcon />
</FacebookShareButton>

// Center relative to entire screen
<FacebookShareButton url={url} windowPosition="screenCenter">
  <FacebookIcon />
</FacebookShareButton>
```

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

### RedditShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the RedditShareButton component for sharing content on Reddit.

```typescript
import { RedditShareButton, RedditIcon } from 'react-share';

<RedditShareButton
  title="Interesting post"
  url="https://example.com"
  aria-label="Share on Reddit"
>
  <RedditIcon size={32} round />
</RedditShareButton>
```

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

### Icon Colors

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of overriding icon fill color and background styles.

```typescript
<FacebookIcon 
  size={32}
  round
  bgStyle={{ fill: '#1877F2' }}
  iconFillColor="#ffffff"
/>
```

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

### Icons v2

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Importing FacebookIcon directly in v2.

```javascript
import { FacebookIcon } from 'react-share';
```

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

### XShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of how to use the XShareButton component to share content to X (formerly Twitter).

```typescript
import { XShareButton, XIcon } from 'react-share';

<XShareButton
  title="Check this out"
  via="username"
  hashtags={["react", "javascript"]}
  related={["relatedaccount"]}
  url="https://example.com"
  aria-label="Share on X"
>
  <XIcon size={32} round />
</XShareButton>
```

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

### LinkedIn Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the LinkedinShareButton component with optional title, summary, and source.

```typescript
<LinkedinShareButton 
  url={url}
  title="Article Title"       // Optional, best-effort
  summary="Description"       // Optional, best-effort
  source="example.com"        // Optional, best-effort
>
  <LinkedinIcon />
</LinkedinShareButton>
```

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

### VKIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the VKIcon component.

```typescript
import { VKIcon } from 'react-share';
<VKIcon size={32} round />
```

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

### TelegramShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the TelegramShareButton component for sharing via Telegram.

```typescript
import { TelegramShareButton, TelegramIcon } from 'react-share';

<TelegramShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on Telegram"
>
  <TelegramIcon size={32} round />
</TelegramShareButton>
```

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

### Mail.ru Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Mail.ru Share Button with its props.

```typescript
import { MailruShareButton, MailruIcon } from 'react-share';

<MailruShareButton
  title="Article title"
  description="Article summary"
  imageUrl="https://example.com/image.jpg"
  url="https://example.com"
  aria-label="Share on Mail.ru"
>
  <MailruIcon size={32} round />
</MailruShareButton>
```

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

### WhatsappIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the WhatsappIcon component.

```typescript
import { WhatsappIcon } from 'react-share';
<WhatsappIcon size={32} round />
```

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

### Facebook Messenger Share Button Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the Facebook Messenger Share Button with its props.

```typescript
import {
  FacebookMessengerShareButton,
  FacebookMessengerIcon
} from 'react-share';

<FacebookMessengerShareButton
  title="Check this out"
  url="https://example.com"
  appId="YOUR_APP_ID"
  aria-label="Share on Facebook Messenger"
>
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>
```

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

### ViberIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the ViberIcon component.

```typescript
import { ViberIcon } from 'react-share';
<ViberIcon size={32} round />
```

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

### WorkplaceIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the WorkplaceIcon component.

```typescript
import { WorkplaceIcon } from 'react-share';
<WorkplaceIcon size={32} round />
```

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

### PinterestIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the PinterestIcon component.

```typescript
import { PinterestIcon } from 'react-share';
<PinterestIcon size={32} round />
```

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

### Icons v1

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Generating FacebookIcon using generateShareIcon in v1.

```javascript
import { generateShareIcon } from 'react-share';

const FacebookIcon = generateShareIcon('facebook');
```

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

### CSS Reset and Styling Hooks

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of CSS class hooks provided by react-share for styling.

```typescript
// All share buttons
.react-share__ShareButton { }

// When disabled
.react-share__ShareButton--disabled { }

// Also added when disabled
.disabled { }

// Share count containers
.react-share__ShareCount { }
```

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

### WeiboIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the WeiboIcon component.

```typescript
import { WeiboIcon } from 'react-share';
<WeiboIcon size={32} round />
```

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

### FacebookIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the FacebookIcon component.

```typescript
import { FacebookIcon } from 'react-share';
<FacebookIcon size={32} round />
```

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

### Twitter/X Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the XShareButton component with optional via, hashtags, and related.

```typescript
<XShareButton 
  url={url}
  title="Tweet text"
  via="twitter_handle"           // Optional
  hashtags={["tag1", "tag2"]}   // Optional, no # prefix
  related={["account1"]}         // Optional related accounts
>
  <XIcon />
</XShareButton>
```

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

### createShareCount HOC Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Utilities.md

Example of creating a custom share count component using the createShareCount higher-order component.

```typescript
import createShareCount from 'react-share/hocs/createShareCount';

// Create a custom share count component
const CustomShareCount = createShareCount((url, callback) => {
  fetch(`/api/share-count?url=${encodeURIComponent(url)}`)
    .then(res => res.json())
    .then(data => callback(data.count))
    .catch(() => callback(undefined));
});

// Use the component
<CustomShareCount url="https://example.com" />
```

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

### Facebook Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the FacebookShareButton component with optional hashtag.

```typescript
<FacebookShareButton 
  url={url}
  hashtag="#reactshare"  // Optional hashtag
>
  <FacebookIcon />
</FacebookShareButton>
```

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

### HatenaIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the HatenaIcon component.

```typescript
import { HatenaIcon } from 'react-share';
<HatenaIcon size={32} round />
```

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

### VK Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the VKShareButton component with optional image, noParse, and noVkLinks.

```typescript
<VKShareButton 
  url={url}
  title="Share Title"
  image="https://example.com/image.jpg"
  noParse={true}     // Prevent VK from fetching URL info
  noVkLinks={true}   // Hide profile links
>
  <VKIcon />
</VKShareButton>
```

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

### Custom Rendering of Share Count

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of custom rendering for share counts using a render function.

```typescript
<FacebookShareCount url={url}>
  {(count) => <span className="count-badge">{count}</span>}
</FacebookShareCount>
```

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

### TelegramIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the TelegramIcon component.

```typescript
import { TelegramIcon } from 'react-share';
<TelegramIcon size={32} round />
```

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

### Email Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the EmailShareButton component with optional subject, body, and separator.

```typescript
<EmailShareButton 
  url={url}
  subject="Email Subject"
  body="Email body text"
  separator=" "    // Optional separator
>
  <EmailIcon />
</EmailShareButton>
```

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

### LineIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the LineIcon component.

```typescript
import { LineIcon } from 'react-share';
<LineIcon size={32} round />
```

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

### LivejournalIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the LivejournalIcon component.

```typescript
import { LivejournalIcon } from 'react-share';
<LivejournalIcon size={32} round />
```

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

### BlueskyIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the BlueskyIcon component.

```typescript
import { BlueskyIcon } from 'react-share';
<BlueskyIcon size={32} round />
```

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

### GabIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the GabIcon component.

```typescript
import { GabIcon } from 'react-share';
<GabIcon size={32} round />
```

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

### InstapaperIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the InstapaperIcon component.

```typescript
import { InstapaperIcon } from 'react-share';
<InstapaperIcon size={32} round />
```

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

### RedditIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the RedditIcon component.

```typescript
import { RedditIcon } from 'react-share';
<RedditIcon size={32} round />
```

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

### Share counts v1

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Importing FacebookShareCount and GooglePlusShareCount from ShareCounts in v1.

```javascript
import { ShareCounts } from 'react-share';

const {
  FacebookShareCount,
  GooglePlusShareCount,
} = ShareCounts;
```

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

### WorkplaceShareButton Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of how to use the WorkplaceShareButton component with basic props.

```typescript
import { WorkplaceShareButton, WorkplaceIcon } from 'react-share';

<WorkplaceShareButton
  quote="Worth a read"
  hashtag="#work"
  url="https://example.com"
  aria-label="Share on Workplace"
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>
```

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

### EmailIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the EmailIcon component.

```typescript
import { EmailIcon } from 'react-share';
<EmailIcon size={32} round />
```

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

### TumblrIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of how to import and use the TumblrIcon component.

```typescript
import { TumblrIcon } from 'react-share';
<TumblrIcon size={32} round />
```

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

### Share buttons v1

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Importing FacebookShareButton and TwitterShareButton from ShareButtons in v1.

```javascript
import { ShareButtons } from 'react-share';

const {
  FacebookShareButton,
  TwitterShareButton,
} = ShareButtons;
```

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

### Share counts v2

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Importing FacebookShareCount and GooglePlusShareCount directly in v2.

```javascript
import {
  FacebookShareCount,
  GooglePlusShareCount,
} from 'react-share';
```

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

### Tumblr Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the TumblrShareButton component with optional title, caption, tags, and posttype.

```typescript
<TumblrShareButton 
  url={url}
  title="Post Title"
  caption="Description"
  tags={["tag1", "tag2"]}        // Optional
  posttype="link"                // Optional
>
  <TumblrIcon />
</TumblrShareButton>
```

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

### ThreadsShareButton Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example usage of the ThreadsShareButton component for sharing on Threads.

```typescript
import { ThreadsShareButton, ThreadsIcon } from 'react-share';

<ThreadsShareButton
  title="Check this out"
  url="https://example.com"
  aria-label="Share on Threads"
>
  <ThreadsIcon size={32} round />
</ThreadsShareButton>
```

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

### Accessibility for Decorative Icons

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of making icons decorative for screen readers.

```typescript
<FacebookIcon size={32} round aria-hidden="true" />
```

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

### Icon with Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of integrating an icon with a share button component.

```typescript
import { FacebookShareButton, FacebookIcon } from 'react-share';

<FacebookShareButton url="https://example.com" aria-label="Share on Facebook">
  <FacebookIcon size={32} round />
</FacebookShareButton>
```

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

### Manual Share Dialog Control

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of preventing the auto-opening of the dialog and handling the share manually.

```typescript
<FacebookShareButton 
  url={url}
  openShareDialogOnClick={false}
  onClick={(event, shareUrl) => {
    // Handle share manually
    window.open(shareUrl, 'share', 'width=550,height=400');
  }}
>
  <FacebookIcon />
</FacebookShareButton>
```

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

### Share buttons v2

Source: https://github.com/nygardk/react-share/blob/master/docs/migrate-v1-to-v2.md

Importing FacebookShareButton and TwitterShareButton directly in v2.

```javascript
import {
  FacebookShareButton,
  TwitterShareButton,
} from 'react-share';
```

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

### Main Entry Point

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Shows the main imports available from the react-share library, including share buttons, icons, and deprecated share count components.

```typescript
import {
  // Share Buttons (25+)
  FacebookShareButton,
  XShareButton,
  LinkedinShareButton,
  // ... other buttons
  
  // Icons (25+)
  FacebookIcon,
  XIcon,
  LinkedinIcon,
  // ... other icons
  
  // Share Counts (Deprecated)
  FacebookShareCount,
  RedditShareCount,
  // ... other counts
} from 'react-share';
```

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

### Custom Styling for Icons

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of overriding background color, icon fill color, and other styles.

```typescript
import { FacebookIcon } from 'react-share';

<FacebookIcon 
  size={40}
  round
  bgStyle={{ fill: '#1877F2', opacity: 0.8 }}
  iconFillColor="#ffffff"
  style={{ cursor: 'pointer' }}
/>
```

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

### Pinterest Link Generator

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Utilities.md

Example of the internal pinterestLink function used to generate Pinterest share URLs.

```typescript
function pinterestLink(url: string, { media, description, pinId }: PinterestShareProps): string {
  if (pinId) {
    return `https://pinterest.com/pin/${pinId}/repin/x/`;
  }
  return 'https://pinterest.com/pin/create/button/' + objectToGetParams({
    url,
    media,
    description,
  });
}
```

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

### Default Size

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example showing IconBase rendering with its default size when the size prop is omitted.

```typescript
<IconBase color="#0866FF">
  <path d="..." />
</IconBase>
```

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

### Facebook Messenger Share Button

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Example of using the FacebookMessengerShareButton component with required appId and optional redirectUri and to.

```typescript
<FacebookMessengerShareButton 
  appId="YOUR_APP_ID"    // Required
  url={url}
  redirectUri={url}       // Optional, defaults to url
  to="RECIPIENT_ID"       // Optional recipient
>
  <FacebookMessengerIcon />
</FacebookMessengerShareButton>
```

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

### CSS Integration Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Demonstrates integrating IconBase with CSS classes and inline styles for custom styling.

```typescript
<IconBase 
  color="#0866FF" 
  size={32}
  className="social-icon"
  style={{ margin: '0 8px' }}
  aria-hidden="true"
>
  <path d="..." />
</IconBase>
```

```css
.social-icon {
  cursor: pointer;
  transition: transform 0.2s;
}

.social-icon:hover {
  transform: scale(1.1);
}
```

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

### TwitterShareButton (Deprecated) Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareButtons.md

Example of using the deprecated TwitterShareButton, noting its alias to XShareButton.

```typescript
import { TwitterShareButton, TwitterIcon } from 'react-share';

// Equivalent to XShareButton
<TwitterShareButton url="https://example.com" aria-label="Share on X">
  <TwitterIcon size={32} round />
</TwitterShareButton>
```

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

### Handle Share Actions

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Example demonstrating how to handle share actions, including pre-click hooks and callbacks for when the share dialog is closed.

```typescript
<FacebookShareButton
  url={url}
  beforeOnClick={async () => {
    // Track before sharing
    await fetch('/api/track-share', { method: 'POST' });
  }}
  onClick={(event, shareUrl) => {
    console.log('Shared URL:', shareUrl);
  }}
  onShareWindowClose={() => {
    console.log('Share dialog closed');
  }}
>
  <FacebookIcon size={32} round />
</FacebookShareButton>
```

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

### File Structure Overview

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/INDEX.md

This snippet shows the directory structure of the react-share library, indicating the location of various documentation files.

```bash
/output/
├── INDEX.md                           ← You are here
├── README.md                          # Navigation and structure guide
├── OVERVIEW.md                        # Library overview and quick start
├── types.md                           # TypeScript type definitions
├── configuration.md                   # Configuration and customization
├── api-reference/
│   ├── ShareButtons.md               # 25+ button components
│   ├── Icons.md                      # 25 icon components
│   ├── ShareCounts.md                # 7 deprecated count components
│   ├── IconBase.md                   # Internal icon base component
│   └── Utilities.md                  # Helper functions and hooks
└── [This file]

```

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

### Rounded Rectangle Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example of using IconBase with the 'borderRadius' prop for rounded corners.

```jsx
<IconBase color="#0866FF" size={32} borderRadius={8}>
  <path d="M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4..." />
</IconBase>
```

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

### Circular Icon Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example of using IconBase with the 'round' prop for a circular background.

```jsx
<IconBase color="#0866FF" size={32} round>
  <path d="M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4..." />
</IconBase>
```

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

### Custom Fill Color Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/IconBase.md

Example of overriding the default icon fill color using 'iconFillColor'.

```jsx
<IconBase 
  color="#0866FF" 
  size={32}
  iconFillColor="#ffcc00"  // Override default white
>
  <path d="M34.1,47V33.3..." />
</IconBase>
```

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

### TumblrShareCount Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareCounts.md

Fetches and displays the share count from Tumblr. Includes an example with custom rendering.

```typescript
import { TumblrShareCount } from 'react-share';

<TumblrShareCount url="https://example.com" />

// With custom rendering
<TumblrShareCount url="https://example.com">
  {(count) => <span>{count} reblogs</span>}
</TumblrShareCount>
```

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

### RedditShareCount Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareCounts.md

Fetches and displays the share count from Reddit. Includes an example with custom rendering.

```typescript
import { RedditShareCount } from 'react-share';

<RedditShareCount url="https://example.com" />

// With custom rendering
<RedditShareCount url="https://example.com">
  {(count) => <span>{count} upvotes</span>}
</RedditShareCount>
```

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

### TypeScript Import

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Illustrates how to import components and types in a TypeScript project.

```typescript
import { FacebookShareButton } from 'react-share';
import type { ShareButtonProps } from 'react-share'; // If exported
```

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

### useIsMounted Hook Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Utilities.md

Example of using the useIsMounted hook to prevent state updates after a component unmounts during asynchronous operations.

```typescript
import { useIsMounted } from 'react-share/hooks/useIsMounted';

function MyComponent() {
  const isMounted = useIsMounted();

  useEffect(() => {
    fetchData().then(data => {
      if (isMounted()) {
        setData(data);  // Safe - won't warn about unmounted component
      }
    });
  }, [isMounted]);

  return <div>{/* ... */}</div>;
}
```

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

### VKShareCount Example

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/ShareCounts.md

Fetches and displays the share count from VK (VKontakte). Includes an example with custom rendering.

```typescript
import { VKShareCount } from 'react-share';

<VKShareCount url="https://example.com" />

// With custom rendering
<VKShareCount url="https://example.com">
  {(count) => <span>{count} shares</span>}
</VKShareCount>
```

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

### Async Operations - beforeOnClick Hook

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Demonstrates using the `beforeOnClick` hook to run asynchronous operations before the share dialog opens.

```typescript
<FacebookShareButton 
  url={url}
  beforeOnClick={() => {
    // Runs immediately on click
    console.log('User clicked share');
  }}
>
  <FacebookIcon />
</FacebookShareButton>
```

```typescript
<FacebookShareButton 
  url={url}
  beforeOnClick={async () => {
    // Dialog waits until this completes
    await fetch('/api/track-share');
  }}
>
  <FacebookIcon />
</FacebookShareButton>
```

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

### MailruIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the MailruIcon component.

```typescript
import { MailruIcon } from 'react-share';
<MailruIcon size={32} round />
```

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

### LivejournalShareButton

Source: https://github.com/nygardk/react-share/blob/master/README.md

Optional props: title, description.

```jsx
import { LivejournalShareButton, LivejournalIcon } from "react-share";

<LivejournalShareButton
  title="Read this next"
  description="Quick summary"
  url={shareUrl}
  aria-label="Share on LiveJournal"
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>;
```

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

### LinkedinIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the LinkedinIcon component.

```typescript
import { LinkedinIcon } from 'react-share';
<LinkedinIcon size={32} round />
```

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

### File Organization

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/README.md

The directory structure of the react-share library.

```tree
output/
├── README.md                          # This file
├── OVERVIEW.md                        # Library overview and quick start
├── types.md                           # TypeScript types and interfaces
├── configuration.md                   # Configuration guide
├── api-reference/
│   ├── ShareButtons.md               # All share button components
│   ├── Icons.md                      # All icon components
│   ├── ShareCounts.md                # Deprecated share count components
│   ├── IconBase.md                   # Internal icon base component
│   └── Utilities.md                  # Helper functions and hooks

```

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

### CSS Classes for styling

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/configuration.md

Share buttons apply specific CSS classes that can be used for styling.

```css
.react-share__ShareButton {
  border-radius: 4px;
  padding: 4px;
}

.react-share__ShareButton--disabled {
  cursor: not-allowed;
}
```

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

### FacebookMessengerIcon Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/api-reference/Icons.md

Example of using the FacebookMessengerIcon component.

```typescript
import { FacebookMessengerIcon } from 'react-share';
<FacebookMessengerIcon size={32} round />
```

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

### Multiple Buttons

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Illustrates how to render multiple share buttons for different platforms.

```typescript
import {
  FacebookShareButton,
  TwitterShareButton,
  LinkedinShareButton,
  FacebookIcon,
  XIcon,
  LinkedinIcon,
} from 'react-share';

function ShareButtons() {
  const url = 'https://example.com';
  
  return (
    <div className="share-buttons">
      <FacebookShareButton url={url} aria-label="Share on Facebook">
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      
      <XShareButton url={url} aria-label="Share on X">
        <XIcon size={32} round />
      </XShareButton>
      
      <LinkedinShareButton url={url} aria-label="Share on LinkedIn">
        <LinkedinIcon size={32} round />
      </LinkedinShareButton>
    </div>
  );
}
```

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

### HatenaShareButton

Source: https://github.com/nygardk/react-share/blob/master/README.md

Optional prop: title.

```jsx
import { HatenaShareButton, HatenaIcon } from "react-share";

<HatenaShareButton title="Read this next" url={shareUrl} aria-label="Share on Hatena">
  <HatenaIcon size={32} round />
</HatenaShareButton>;
```

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

### BlueskyShareButton

Source: https://github.com/nygardk/react-share/blob/master/README.md

Optional props: title, separator. Example usage with BlueskyIcon.

```jsx
import { BlueskyShareButton, BlueskyIcon } from "react-share";

<BlueskyShareButton title="Read this next" url={shareUrl} aria-label="Share on Bluesky">
  <BlueskyIcon size={32} round />
</BlueskyShareButton>;
```

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

### Basic Usage

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Demonstrates the basic usage of a share button component with its corresponding icon.

```typescript
import { FacebookShareButton, FacebookIcon } from 'react-share';

export function ShareWidget() {
  const url = 'https://example.com';
  
  return (
    <FacebookShareButton url={url} aria-label="Share on Facebook">
      <FacebookIcon size={32} round />
    </FacebookShareButton>
  );
}
```

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

### Tree-shaking Optimized Import

Source: https://github.com/nygardk/react-share/blob/master/_autodocs/OVERVIEW.md

Demonstrates the recommended way to import components for tree-shaking, importing only the necessary parts of the library.

```typescript
// ✓ Good - imports only needed components
import { FacebookShareButton, FacebookIcon } from 'react-share';

// Avoid - imports entire library
import * as Share from 'react-share';
```