> 웹 프론트엔드 > JS 튜토리얼 > Web Share API와 반응하여 유연한 공유 시스템 구축

Web Share API와 반응하여 유연한 공유 시스템 구축

Barbara Streisand
풀어 주다: 2025-01-30 02:39:08
원래의
955명이 탐색했습니다.

Building a Flexible Share System in React with the Web Share API 여러 타사 공유 스크립트에 의해 무게가 둔화 된 웹 사이트에 지쳤습니까? Web Share API는 간소화 된 성능 대안을 제공하여 장치의 기본 공유 기능을 활용합니다. 이 튜토리얼은 현대적이고 반응 기반 공유 시스템을 구축하는 것을 보여줍니다 프로젝트 설정

vite and typescript를 사용하여 새로운 React 프로젝트를 만들어 시작하십시오 :

의 종속성 설치 :

스타일 (선택 사항이지만 권장) : 토스트 제공 업체를 메인 구성 요소에 추가하십시오 :

웹 공유 이해 api

Web Share API는 장치의 내장 공유 메커니즘과 완벽하게 통합되어 플랫폼 기본 공유 경험을 제공합니다. 이것은 모바일 및 데스크탑에서 일관된 사용자 경험을 제공합니다.

1

2

npm create vite@latest my-share-app -- --template react-ts

cd my-share-app

로그인 후 복사
<🎜 🎜> <<> 공유 후크 생성

<🎜 🎜> 공유 논리를 관리하기 위해 사용자 정의 후크 (<🎜 🎜>)를 만들어 봅시다.

<🎜 🎜> <<> 구현 고장

1

npm install sonner

로그인 후 복사
<🎜 🎜>

<<> 제공 : <🎜 🎜>

1

2

npm install -D tailwindcss@3 postcss autoprefixer

npx tailwindcss init -p

로그인 후 복사
<<> : 클립 보드 API를 사용한 클립 보드 폴백

<<> : 웹 공유 API의 우선 순위를 정하고, 이용할 수 없거나 실패한 경우 sonner로 다시 떨어집니다. App 이 접근 방식은 다양한 브라우저 및 장치에서 강력한 공유 경험을 보장합니다.

<<<> 구성 요소에서 후크 사용

1

2

3

4

5

6

7

8

9

10

11

// src/App.tsx

import { Toaster } from 'sonner';

 

function App() {

  return (

    <>

      <Toaster position="bottom-right" />

      {/* Your app content */}

    </>

  );

}

로그인 후 복사

<<> 다음은 <🎜 🎜> 구성 요소 ()입니다

: <🎜 🎜>의 사용법

<🎜 🎜> <<> 브라우저 지원 및 고려 사항

Web Share API는 최신 모바일 및 데스크탑 브라우저에서 광범위한 지원을 즐깁니다. 기억하십시오 : <.> <(> 보안 컨텍스트 (https)가 필요합니다 <(> 사용자 상호 작용 (예 : 버튼 클릭)이 필요합니다 모든 데이터 유형이 보편적으로 지원되는 것은 아닙니다 <🎜 🎜> <<> 모범 사례

src/hooks/useShare.ts

<<> 항상 폴백을 포함하십시오.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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;

로그인 후 복사

오류를 우아하게 처리하십시오. 사용자에게 성공 또는 실패를 알립니다 간단하게 유지하십시오. 명확하고 간결한 버튼이 충분합니다

장치를 통해 철저히 테스트하십시오

useShare 리소스

  1. 예제 프로젝트 (GitHub) : [해당되는 경우 github 링크를 삽입] copy 결론
  2. 웹 공유 API는 전통적인 공유 방법에 대한 우수한 대안을 제공합니다. React 및 사려 깊은 오류 처리와 결합하여 사용자를위한 원활한 기본 공유 경험을 만들 수 있습니다. 다음 프로젝트에서 시도해보십시오! share

위 내용은 Web Share API와 반응하여 유연한 공유 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿