React Hook For Managing Object URLs.

use-object-url.ts

import { useEffect, useState } from 'react';

export type BlobType = File | Blob | MediaSource | null;

export function useObjectUrl(initialObject: BlobType | (() => BlobType) = null) {
    const [objectUrl, setObjectUrl] = useState<string | null>(null);

    const [object, setObject] = useState<BlobType>(initialObject);

    useEffect(() => {
        if (!object) {
            return;
        }

        const url = URL.createObjectURL(object);

        setObjectUrl(url);

        return () => {
            URL.revokeObjectURL(url);

            setObjectUrl(null);
        };
    }, [object]);

    return {
        objectUrl,
        object,
        setObject,
    };
}