useObjectUrl

Creates an URL for the provided File, Blob, or MediaSource via URL.createObjectURL() and automatically releases the URL via URL.revokeObjectURL() when the source changes or the component is unmounted.

Usage

import { useObjectUrl } from "@reactuses/core";
import { ChangeEvent, useState } from "react";

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

  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    const files = target.files;
    setFile(files && files.length > 0 ? files[0] : undefined);
  };
  return (
    <div>
      <p>Select File</p>
      <input type="file" onChange={onFileChange} />
      <p>Object Url</p>
      <div>{url}</div>
    </div>
  );
};

Example

Select File

Object Url

Type Declarations

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