# react-ipfs-image

> Easily render images from IPFS.

Latest version **0.7.1** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ipfs-image
pnpm add react-ipfs-image
yarn add react-ipfs-image
bun add react-ipfs-image
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2023-05-29 |
| First published | 2022-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 73.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dhaiwat Pandya |
| Maintainers | dhaiwat10 |

## Links

- npm: https://www.npmjs.com/package/react-ipfs-image
- npm.io page: https://npm.io/package/react-ipfs-image

## Recent versions

- 0.7.1 (latest) — 2023-05-29
- 0.7.0 — 2022-10-28
- 0.6.0 — 2022-07-15
- 0.5.0 — 2022-07-15
- 0.4.0 — 2022-07-13
- 0.3.2 — 2022-07-03
- 0.3.1 — 2022-07-03
- 0.3.0 — 2022-07-03
- 0.2.0 — 2022-07-03

## README

# react-ipfs-image

Easily render images from IPFS.

## Installation

```bash
npm install react-ipfs-image

yarn add react-ipfs-image
```

## Getting started

```tsx
import { IpfsImage } from 'react-ipfs-image';

const Page = () => {
  return (
    <>
      {/* works with both of the following formats */}
      <IpfsImage hash='ipfs://Qme8SriYgGNoXQzG1qYYZKThv3QTBf7pMJwUpu3gqaqQRH'>
      <IpfsImage hash='Qme8SriYgGNoXQzG1qYYZKThv3QTBf7pMJwUpu3gqaqQRH'>

      {/* you can pass in a gateway URL of your choice. the default gateway url is `https://ipfs.infura.io/ipfs` */}
      <IpfsImage hash='Qme8SriYgGNoXQzG1qYYZKThv3QTBf7pMJwUpu3gqaqQRH' gatewayUrl='https://gateway.pinata.cloud/ipfs'>

      {/* you can also pass in *any* props you can pass to a native HTML `img` tag */}
      <IpfsImage hash='Qme8SriYgGNoXQzG1qYYZKThv3QTBf7pMJwUpu3gqaqQRH' alt='my image' className='mt-2 rounded' onClick={() => {}} />
    </>
  )
}
```

This package also has `<IpfsVideo />`, `<IpfsAudio />` and `<IpfsMedia />` that work similarly to `<IpfsImage />`.

Made by [Dhaiwat](https://twitter.com/dhaiwat10)! :)

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