Skip to content
On this page

useShare

Category
Export Size
1.02 kB
Last Changed
5 months ago

Reactive Web Share API. The Browser provides features that can share content in text or file.

The share method has to be called following a user gesture like a button click. It can’t simply be called on page load for example. That’s in place to help prevent abuse.

Demo

Usage

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

const { share, isSupported } = useShare()

function startShare() {
  share({
    title: 'Hello',
    text: 'Hello my friend!',
    url: location.href,
  })
}
import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

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

Passing a source ref

You can pass a ref to it, changes from the source ref will be reflected to your sharing options.

js
import { ref } from 'vue'

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

shareOptions.value.text = 'bar'

share()
import { ref } from 'vue'

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

shareOptions.value.text = 'bar'

share()

Type Declarations

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

Source

SourceDemoDocs

Contributors

Anthony Fu
Antério Vieira
Jelf
Shinigami
João Eudes Lima

Changelog

v8.9.3 on 7/14/2022
106d6 - fix!: rename type ShareOptions to UseShareOptions (#1888)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)

Released under the MIT License.