ipld-explorer-components

React components for https://explore.ipld.io

Usage no npm install needed!

<script type="module">
  import ipldExplorerComponents from 'https://cdn.skypack.dev/ipld-explorer-components';
</script>

README

IPLD Explorer Components

React components for https://explore.ipld.io (https://github.com/ipfs/explore.ipld.io) and ipfs-webui

Screenshot of the IPLD explorer

Build Status Dependencies Status

Background

This module was extracted from the explore.ipld.io so it could be reused from the IPFS Web UI.

Usage

WARNING: This module is not intended to be re-used in it's current form by other projects. It's just enough to work with a create-react-app set up, as long as you follow the steps below. There is much more work to do to make this a nice set of generic components.

Install it from npm:

npm install ipld-explorer-components

The ES5 friendly version of the src dir is generated to the dist dir and the page components are all provided as named exports so you can import them like so:

import {ExplorePage, StartExploringPage} from `ipld-explorer-components`

The following Components are available:

export {
  StartExploringPage,
  ExplorePage,
  IpldExploreForm,
  CidInfo,
  IpldGraph
  ObjectInfo,
  exploreBundle
}

There are peerDependencies so that the parent app can pick the versions of common deps. You'll need to add relevant deps to your project.

And, assuming you are using create-react-app or a similar webpack set up, you'll need the following CSS imports:

import 'tachyons'
import 'ipfs-css'
import 'react-virtualized/styles.css'
import 'ipld-explorer-lib/dist/components/object-info/LinksTable.css'
import 'ipld-explorer-lib/dist/components/loader/Loader.css'

Contribute

Feel free to dive in! Open an issue or submit PRs.

To contribute to IPFS in general, see the contributing guide.

Releasing

License

MIT © Protocol Labs