Grab a URL from a IPFS path by using URL.createObjectURL.
$ npm install react-ipfs-urlThis library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.
With <IpfsUrl> component:
import React from 'react';
import { IpfsUrl } from 'react-ipfs-url';
const ipfs = /* your ipfs node, perhaps provide it via context */;
const SomeComponent = () => (
<IpfsUrl ipfs={ ipfs } input="/ipfs/QmQuMzeovz...">
{ ({ status, value }) => (
<>
{ status === 'pending' && 'Loading...' }
{ status === 'rejected' && 'Oops, failed to load' }
{ status === 'fulfilled' && <img src={ value } alt="" /> }
<>
) }
</IpfsUrl>
);With useIpfsUrl() hook:
import React from 'react';
import { useIpfsUrl } from 'react-ipfs-url';
const ipfs = /* your ipfs node, perhaps provide it via context */;
const SomeComponent = () => {
const [urlStatus, urlValue] = useIpfsUrl(ipfs, '/ipfs/QmQuMzeovz..');
return (
<>
{ status === 'pending' && 'Loading...' }
{ status === 'rejected' && 'Oops, failed to load' }
{ status === 'fulfilled' && <img src={ value } alt="" /> }
</>
);
};The <IpfsUrl> component allows you to conditionally render children based on the url status and fulfillment/rejection value. It leverages the render props technique to know what to render.
All properties from react-promiseful are also valid.
Type: object
The ipfs node to be used.
Type: string
A valid IPFS path, hash or a provider URL, such as a gateway URL or an Infura URL.
⚠️ At the moment, IPNS paths are not supported for theipfsandipfsOfflineproviders: #2
⚠️ There's no support for fully qualified domains URLs yet: #4
Type: string
Default: input-first
The strategy to use when resolving a valid URL.
input-first: Use the provider associated with theinputfirst and fallback to resolving with IPFS.ipfs-first: Use IPFS to resolve the URL first and fallback to resolving with the provider associated with theinputipfs-offline-first: Use offline IPFS first and fallback to resolving with the provider, followed by the online IPFS.ipfs-only: Only use IPFS to resolve the URL, even ifinputcomes from another provideripfs-offline-only: Only use IPFS (offline) to resolve the URL, even ifinputcomes from another provider
Type: object
Default: { gateway: 12500, infura: 12500, ipfsOffline: 5000, ipfs: 180000 }
The max time to spend checking for the existence of the content on providers.
Type: number
Default: 60000
The delay in which object urls created with URL.createObjectURL are revoked when they are no longer used.
Type: Function
A render prop function with the following signature:
(state) => {}The state argument is an object that contains the following properties:
statusis one ofnone(when there's no promise),pending,rejected,fulfilledvalueis either the fulfillment value (url) or the rejection valuewithinThresholdindicating if we are still within the configuredthresholdMs
See react-promiseful for more info.
The hook version of the <IpfsUrl> component. The options available to both are exactly the same.
const urlState = useIpfsUrl(ipfs, '/ipfs/QmQuMzeovz..');The returned value from the hook is the url promise state, an object that contains the following properties:
statusis one ofnone(when there's no promise),pending,rejected,fulfilledvalueis either the fulfillment value (url) or the rejection valuewithinThresholdindicating if we are still within the configuredthresholdMs
See react-promiseful for more info.
$ npm test
$ npm test -- --watch # during developmentReleased under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent