# use-object-url

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

Latest version **1.0.0** (published 2019-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-object-url
pnpm add use-object-url
yarn add use-object-url
bun add use-object-url
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-09-01 |
| First published | 2019-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Vitor Luiz Cavalcanti |
| Maintainers | vitorluizc |
| Keywords | react-hook, react |

## Links

- npm: https://www.npmjs.com/package/use-object-url
- Repository: https://github.com/VitorLuizC/use-object-url
- Homepage: https://github.com/VitorLuizC/use-object-url#readme
- Issues: https://github.com/VitorLuizC/use-object-url/issues
- npm.io page: https://npm.io/package/use-object-url

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-09-01

## README

# useObjectURL

[![Build Status](https://travis-ci.org/VitorLuizC/use-object-url.svg?branch=master)](https://travis-ci.org/VitorLuizC/use-object-url)
[![License](https://badgen.net/github/license/VitorLuizC/use-object-url)](./LICENSE)
[![Library minified size](https://badgen.net/bundlephobia/min/use-object-url)](https://bundlephobia.com/result?p=use-object-url)
[![Library minified + gzipped size](https://badgen.net/bundlephobia/minzip/use-object-url)](https://bundlephobia.com/result?p=use-object-url)

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.

```js
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.

```sh
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.

```html
<!-- 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](./docs/README.md).

## License

Released under [MIT License](./LICENSE).

---
_Source: https://npm.io/package/use-object-url · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._