useObjectUrl

Category

Browser

Export Size

197 B

Last Changed

5 days ago

Reactive URL representing an object.

Demo

Usage

import type { ChangeEvent } from 'react'
import { useObjectUrl } from '@reause/core'
import { useState } from 'react'

const [file, setFile] = useState<File>()
const url = useObjectUrl(file)

function onFileChange(event: ChangeEvent<HTMLInputElement>) {
  const files = event.target.files
  setFile(files && files.length > 0 ? files[0] : undefined)
}

return (
  <>
    <input type="file" onChange={onFileChange} />

    <a href={url}>Open file</a>
  </>
)

Reactive updates need no wrapper in React — pass state directly; whenever the object changes, the previous URL is revoked and a new one is created:

const [file, setFile] = useState<File>()
const url = useObjectUrl(file) // `undefined` until a file is set

Source Forms

object is a read-only value source and takes a plain Blob | MediaSource | null | undefined (upstream: MaybeRefOrGetter<...>). Resolve a React ref or state value at the call site:

const [file, setFile] = useState<File>()

const url = useObjectUrl(file) // a new URL is created whenever `file` changes
const refUrl = useObjectUrl(fileRef.current) // resolve a React ref at the call site

Type Declarations

export function useObjectUrl(object: Blob | MediaSource | null | undefined): string | undefined

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)