npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ipfs-url

v0.2.2

Published

Grab a URL from a IPFS path by using URL.createObjectUrl

Downloads

181

Readme

react-ipfs-url

NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

Grab a URL from a IPFS path by using URL.createObjectURL.

Installation

$ npm install react-ipfs-url

This 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.

Usage

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 } path="/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="" /> }
        </>
    );
};

API

IpfsUrl

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.

Props

All properties from react-promiseful are also valid.

ipfs

Type: object

The ipfs node to be used.

input

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 the ipfs and ipfsOffline providers: https://github.com/ipfs-shipyard/react-ipfs-url/issues/2

⚠️ There's no support for fully qualified domains URLs yet: https://github.com/ipfs-shipyard/react-ipfs-url/issues/4

stategy

Type: string
Default: input-first

The strategy to use when resolving a valid URL.

  • input-first: Use the provider associated with the input first and fallback to resolving with IPFS.
  • ipfs-first: Use IPFS to resolve the URL first and fallback to resolving with the provider associated with the input
  • ipfs-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 if input comes from another provider
  • ipfs-offline-only: Only use IPFS (offline) to resolve the URL, even if input comes from another provider
checkTimeout

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.

disposeDelayMs

Type: number
Default: 60000

The delay in which object urls created with URL.createObjectURL are revoked when they are no longer used.

children

Type: Function

A render prop function with the following signature:

(state) => {}

The state argument is an object that contains the following properties:

  • status is one of none (when there's no promise), pending, rejected, fulfilled
  • value is either the fulfillment value (url) or the rejection value
  • withinThreshold indicating if we are still within the configured thresholdMs

See react-promiseful for more info.

useIpfsUrl(ipfs, path, [options])

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:

  • status is one of none (when there's no promise), pending, rejected, fulfilled
  • value is either the fulfillment value (url) or the rejection value
  • withinThreshold indicating if we are still within the configured thresholdMs

See react-promiseful for more info.

Tests

$ npm test
$ npm test -- --watch # during development

License

Released under the MIT License.