コンテンツへスキップ

useShare

カテゴリ
エクスポートサイズ
546 B
最終変更日
2ヶ月前

リアクティブなWeb Share API。ブラウザは、テキストまたはファイルでコンテンツを共有できる機能を提供します。

shareメソッドは、ボタンクリックなどのユーザー操作の後で呼び出す必要があります。例えば、ページロード時に単純に呼び出すことはできません。これは、悪用を防ぐためです。

デモ

使用方法

JavaScript
import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

function startShare() {
  share({
    title: 'Hello',
    text: 'Hello my friend!',
    url: location.href,
  })
}

ソースrefの受け渡し

refを渡すことができます。ソースrefからの変更は、共有オプションに反映されます。

TypeScriptコード
import { ref } from 'vue'

const shareOptions = ref<ShareOptions>({ text: 'foo' })
const { share, isSupported } = useShare(shareOptions)

shareOptions.value.text = 'bar'

share()
JavaScript
import { ref } from 'vue'
const shareOptions = ref({ text: 'foo' })
const { share, isSupported } = useShare(shareOptions)
shareOptions.value.text = 'bar'
share()

型定義

TypeScript
export interface UseShareOptions {
  title?: string
  files?: File[]
  text?: string
  url?: string
}
/**
 * Reactive Web Share API.
 *
 * @see https://vueuse.dokyumento.jp/useShare
 * @param shareOptions
 * @param options
 */
export declare function useShare(
  shareOptions?: MaybeRefOrGetter<UseShareOptions>,
  options?: ConfigurableNavigator,
): {
  isSupported: ComputedRef<boolean>
  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
}
export type UseShareReturn = ReturnType<typeof useShare>

ソースコード

ソースコードデモドキュメント

コントリビューター

Anthony Fu
Antério Vieira
Jelf
Anthony Fu
無塵室内点墨
三咲智子 Kevin Deng
Shinigami
João Eudes Lima

変更ログ

v10.0.0-beta.4 2023/4/13
4d757 - feat(types)!: MaybeComputedRefMaybeRefOrGetterに名前変更
0a72b - feat(toValue): resolveUnreftoValueに名前変更

MITライセンスの下でリリースされています。