Skip to content
Branch: master
Find file History

React Firebase Hooks - Cloud Storage

React Firebase Hooks provides convenience listeners for files stored within Firebase Cloud Storage. The hooks wrap around the method.

In addition to returning the download URL, the hooks provide an error and loading property to give a complete lifecycle for loading from Cloud Storage.

All hooks can be imported from react-firebase-hooks/storage, e.g.

import { useCollection } from 'react-firebase-hooks/storage';

List of Cloud Storage hooks:


const [downloadUrl, loading, error] = useDownloadURL(reference);

Retrieve the download URL for a storage reference.

The useDownloadURL hook takes the following parameters:

  • reference: (optional) that you would like the download URL for


  • downloadUrl: A string download URL, or undefined if no storage reference is supplied
  • loading: A boolean to indicate whether the the download URL is still being loaded
  • error: Any firebase.FirebaseError returned by Firebase when trying to load the user, or undefined if there is no error

Full example

import { useDownloadURL } from 'react-firebase-hooks/storage';

const DownloadURL = () => {
  const [value, loading, error] = useDownloadURL('path/to/file')

  return (
        {error && <strong>Error: {error}</strong>}
        {loading && <span>Download URL: Loading...</span>}
        {!loading && value && (
            <span>Download URL: {value}</span>
You can’t perform that action at this time.