Skip to content

hyy829119/ipld-explorer-components

 
 

Repository files navigation

IPLD Explorer Components

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

See: https://github.com/ipfs-shipyard/ipld-explorer

Screenshot of the IPLD explorer

Build Status Dependencies Status

Background

This module was extracted from the IPLD Explorer 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 the following deps to your project.

"i18next": "^17.0.11",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-icu": "^1.1.2",
"i18next-xhr-backend": "^3.1.1",
"ipfs-css": "^0.13.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-i18next": "^10.12.1",
"react-loadable": "^5.5.0",
"react-virtualized": "^9.21.1",
"redux-bundler": "^25.0.0",
"redux-bundler-react": "^1.1.1",
"tachyons": "^4.11.1"

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.

License

MIT © Protocol Labs

Packages

No packages published

Languages

  • JavaScript 85.5%
  • CSS 14.5%