肥大化したウェブサイトにうんざりしていたのは、複数のサードパーティ共有スクリプトに圧倒されましたか? Web Share APIは、合理化されたパフォーマンスのある代替品を提供し、デバイスのネイティブ共有機能を活用します。このチュートリアルでは、最新の反応ベースの共有システムの構築を示しています
プロジェクトのセットアップ
ViteとTypeScriptを使用して新しいReactプロジェクトを作成することから始めます。依存関係をインストール:
<code class="language-bash">npm create vite@latest my-share-app -- --template react-ts cd my-share-app</code>
スタイリングの場合(オプションですが推奨):
<code class="language-bash">npm install sonner</code>
メイン
コンポーネントに<code class="language-bash">npm install -D tailwindcss@3 postcss autoprefixer npx tailwindcss init -p</code>
sonner
App
<code class="language-typescript">// src/App.tsx import { Toaster } from 'sonner'; function App() { return ( <> <Toaster position="bottom-right" /> {/* Your app content */} </> ); }</code>
Web Share APIは、プラットフォームとネイティブの共有エクスペリエンスを提供し、デバイスの組み込み共有メカニズムとシームレスに統合します。 これにより、モバイルとデスクトップ全体で一貫したユーザーエクスペリエンスが提供されます。
共有フックの作成共有ロジックを管理するためのカスタムフック()を作成しましょう:
src/hooks/useShare.ts
実装の内訳
<code class="language-typescript">import { toast } from "sonner"; const useShare = () => { const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); toast.success(`Copied ${text} to clipboard!`); } catch (error) { console.error("Clipboard copy error:", error); toast.error("Clipboard copy failed."); } }; const share = async (url: string, title: string, description: string) => { if (navigator.share) { try { await navigator.share({ title, text: description, url }); console.log("Share successful!"); } catch (error) { console.error("Sharing error:", error); toast.error("Sharing failed."); copy(url); // Fallback to copy } } else { console.error("Web Share API not supported."); toast.error("Web Share API not supported. Copying URL instead."); copy(url); // Fallback to copy } }; return { copy, share }; }; export default useShare;</code>
sultion:
useShare
:クリップボードAPIを使用したクリップボードのフォールバック。
copy
share
コンポーネントでフックを使用していますcopy
コンポーネント(
):です およびその使用法
:
ShareButton
src/components/ShareButton.tsx
<code class="language-typescript">// src/components/ShareButton.tsx import { FC } from 'react'; import useShare from '../hooks/useShare'; interface ShareButtonProps { url: string; title: string; description: string; } const ShareButton: FC<ShareButtonProps> = ({ url, title, description }) => { const { share } = useShare(); const handleShare = () => { share(url, title, description); }; return ( <button onClick={handleShare}>Share</button> ); }; export default ShareButton;</code>
App.tsx
Web Share APIは、最新のモバイルおよびデスクトップブラウザーで幅広いサポートを享受しています。 覚えておいてください:
<code class="language-typescript">// src/App.tsx import ShareButton from './components/ShareButton'; function App() { return ( <div className="p-4"> <h1>My Awesome Content</h1> <ShareButton url={window.location.href} title="Check out this content!" description="Interesting article about the Web Share API..." /> </div> ); }</code>
セキュアコンテキスト(https)が必要です。 ユーザーインタラクション(たとえば、ボタンクリック)が必要です。
すべてのデータ型が普遍的にサポートされているわけではありません
エラーを優雅に処理します。ユーザーに成功または失敗を通知します。
Web Share APIは、従来の共有方法に代わる優れた代替手段を提供します。 それを反応と思慮深いエラー処理と組み合わせることで、ユーザーにシームレスでネイティブ共有エクスペリエンスを作成できます。 次のプロジェクトで試してみてください!
以上がWeb Share APIとの反応で柔軟な共有システムを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。