Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including use-object-url with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var useObjectUrl = require("use-object-url")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

use-object-url v1.0.0

React Hook to create and revoke URL for any instance of `File`, `Blob` or `MediaSource`.

useObjectURL

Build Status License Library minified size Library minified + gzipped size

React Hook that receives an instance of File, Blob or MediaSource and creates an URL representing it. It releases URL when component unmount or parameter changes.

import useObjectURL from 'use-object-url';

const DownloadFileLink = ({ file, filename }) => {
  const fileURL = useObjectURL(file);

  return (
    <a href={fileURL} target="_blank" download={filename}>
      Download
    </a>
  );
};

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

npm install use-object-url --save

# For Yarn, use the command below.
yarn add use-object-url

Installation from CDN

This module has an UMD bundle available through JSDelivr and Unpkg CDNs.

<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/use-object-url"></script>

<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/use-object-url"></script>

<script>
  function PreviewImage(props) {
    // UMD module is exposed through the "useObjectURL" function.
    var imageURL = useObjectURL(props.uploadedImage);

    return React.createElement('img', {
      src: imageURL,
      alt: 'Uploaded image',
      title: 'Preview of uploaded image.'
    });
  }
</script>

Documentation

Documentation generated from source files by Typedoc.

License

Released under MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free