React components for https://explore.ipld.io (https://github.com/ipfs/explore.ipld.io) and ipfs-webui
This module was extracted from the explore.ipld.io so it could be reused from the IPFS Web UI.
WARNING: This module is not intended to be re-used in it's current form by other projects. There is 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,
IpldCarExploreForm,
CidInfo,
IpldGraph
ObjectInfo,
exploreBundle,
heliaBundle
}
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-components/dist/components/object-info/LinksTable.css'
import 'ipld-explorer-components/dist/components/loader/Loader.css'
You can see an example of how to use these components in the devPage.jsx file.
To customize the links displayed in the start exploring page, you can pass a links
property to the StartExploringPage
component. This property should be an array of objects with the following properties:
{
name: 'Name of your example link',
cid: 'bafyfoo...',
type: 'dag-pb' // or dag-json, etc...
}
NOTE: PRs adding an old IPLDFormat codec would need the old blockcodec-to-ipld-format
tool, which has many out-of-date deps. We will only accept PRs for adding BlockCodec interface codecs.
To add another codec, you will need to update all locations containing the comment // #WhenAddingNewCodec
:
- Add a dependency on the codec to this package (if it's not already in multiformats or other package)
- Add the codec in the switch statement in ./src/lib/codec-importer.ts
- Update ./src/lib/get-codec-name-from-code.ts to return the codec name for your codec
- Add a unit test to ./src/lib/resolve-ipld-path.test.js and ensure that calling
resolveIpldPath
returns the expected results- If the default
resolveFn
in ./src/lib/get-codec-for-cid.ts doesn't resolve your paths correctly, you will need to add a resolver method for your codec to thecodecResolverMap
in ./src/lib/get-codec-for-cid.ts
- If the default
see #360 (comment) for history.
To add another hasher, you will need to update all locations containing the comment // #WhenAddingNewHasher
:
- Add a dependency on the hasher to this package (if it's not already in multiformats or other package)
- Update ./src/lib/hash-importer.ts
- Update
SupportedHashers
to include your hasher type - Update
getHasherForCode
to return your hasher
- Update
- Update the hasher codes used by the
hashers
property passed to Helia init in ./src/lib/init-helia.ts
see #395 for an example.
These components use redux-bundler, and your app will need to use a redux-bundler provider to propagate the properties and selectors. You can find a basic example in ./dev/devPage.jsx.
In short, these components export two bundles found in ./src/bundles: explore
and heliaBundle
. The explore bundle and components herein have a few redux-bundler selector dependencies that you need to make sure exist and are called properly.
Dependent | redux-bundler selector | Notes |
---|---|---|
explore bundle | selectHeliaReady | The explore bundle depends on this selector so it knows when the Helia node is available for use |
explore & other bundles | selectHelia | The explore bundle gets the Helia node via this selector |
Main page (or any) | doInitHelia | A consuming app needs to call this selector to tell the bundle that provides the Helia node to instantiate it. |
If you don't want to use the heliaBundle
, you must adapt the selectors appropriately.
Feel free to dive in! Open an issue or submit PRs.
To contribute to IPFS in general, see the contributing guide.
- Run
tx pull -a
to pull the latest translations from Transifex (i18n#transifex-101)) - Update the version (
npm version major/minor/patch
) - Push the changes (
git push && git push --follow-tags
) - Update the changelog
- Add release notes to https://github.com/ipfs/ipld-explorer-components/releases, use the tag and copy changelog changes
- Publish to npm (
npm publish
)
MIT © Protocol Labs