useShare Hook

The useShare hook provides an easy way to implement native sharing functionality using the Web Share API, with automatic fallback to clipboard copying when native sharing is not available. Perfect for sharing content, URLs, and files across different platforms and devices.

Features

- Native Sharing: Uses the Web Share API for native sharing experience on supported devices.
- Automatic Fallback: Falls back to clipboard copying when Web Share API is not available.
- File Sharing: Supports sharing files when the platform allows it.
- Error Handling: Comprehensive error handling with customizable callbacks.
- Loading States: Tracks sharing state for better UX.
- SSR Safe: Handles server-side rendering environments gracefully.

Installation

$3

``bash
npm install @custom-react-hooks/use-share
`

or

`bash
yarn add @custom-react-hooks/use-share
`

$3

`sh
npm install @custom-react-hooks/all
`

or

`sh
yarn add @custom-react-hooks/all
`

Usage

$3

`typescript
import React from 'react';
import { useShare } from '@custom-react-hooks/use-share';

const ShareButton = () => {
const { share, isSupported, isSharing, error } = useShare({
onSuccess: () => console.log('Shared successfully!'),
onError: (error) => console.error('Share failed:', error),
});

const handleShare = async () => {
try {
await share({
title: 'Check out this awesome content!',
text: 'I found this really interesting article.',
url: 'https://example.com',
});
} catch (error) {
console.error('Sharing failed:', error);
}
};

return (


export default ShareButton;
`

$3

`typescript
import React from 'react';
import { useShare } from '@custom-react-hooks/use-share';

interface Article {
title: string;
excerpt: string;
url: string;
author: string;
}

const ArticleCard = ({ article }: { article: Article }) => {
const { share, isSupported, isSharing } = useShare({
onSuccess: () => {
// Show success toast or notification
alert('Article shared successfully!');
},
onError: (error) => {
alert(Failed to share: ${error.message});
},
});

const handleShare = async () => {
await share({
title: article.title,
text: ${article.excerpt} - by ${article.author},
url: article.url,
});
};

return (


`typescript
import React, { useRef } from 'react';
import { useShare } from '@custom-react-hooks/use-share';

const FileSharer = () => {
const fileInputRef = useRef(null);
const { share, isSupported, isSharing } = useShare();

const handleFileShare = async () => {
const files = fileInputRef.current?.files;
if (!files || files.length === 0) {
alert('Please select a file first');
return;
}

try {
await share({
title: 'Sharing a file',
files: Array.from(files),
});
} catch (error) {
console.error('File sharing failed:', error);
}
};

return (


`typescript
import React from 'react';
import { useShare } from '@custom-react-hooks/use-share';

const SocialShareButtons = ({ content }: { content: { title: string; url: string } }) => {
const { share, isSupported } = useShare({
fallbackCopy: true,
onSuccess: () => {
// Track sharing analytics
console.log('Content shared successfully');
},
});

const shareToSocial = async (platform?: string) => {
const shareData = {
title: content.title,
url: content.url,
text: platform ? Check this out! ${content.title} : content.title,
};

await share(shareData);
};

return (


`typescript
import React, { useState } from 'react';
import { useShare } from '@custom-react-hooks/use-share';

const CustomShareModal = ({ isOpen, onClose, content }) => {
const [customMessage, setCustomMessage] = useState('');

const { share, isSupported, isSharing, error } = useShare({
onSuccess: () => {
onClose();
setCustomMessage('');
},
});

const handleCustomShare = async () => {
await share({
title: content.title,
text: customMessage || content.description,
url: content.url,
});
};

if (!isOpen) return null;

return (


- options (UseShareOptions, optional): Configuration options.
- onSuccess (function, optional): Callback fired when sharing succeeds.
- onError (function, optional): Callback fired when sharing fails.
- fallbackCopy (boolean, optional): Whether to fallback to clipboard copying. Default: true.

$3

An object containing:

- share (function): Function to trigger sharing with ShareData.
- isSupported (boolean): Whether the Web Share API is supported.
- isSharing (boolean): Whether sharing is currently in progress.
- error (string | null): Error message if sharing fails.

$3

`typescript
interface ShareData {
title?: string; // Title of the content to share
text?: string; // Text description or message
url?: string; // URL to share
files?: File[]; // Files to share (when supported)
}
`

Browser Support

$3

Contributions to enhance useShare` are welcome. Feel free to submit issues or pull requests to the repository.

License

MIT License - see the LICENSE file for details.