TypeScript icon, indicating that this package has built-in type declarations

    0.6.2 • Public • Published



    🎣 React hooks & components on top of ocean.js

    npm Build Status Maintainability Test Coverage code style: prettier js oceanprotocol

    Table of Contents

    🏗 Installation

    npm install @oceanprotocol/react

    🏄 Quick Start

    1. Add Provider

    First, wrap your whole app with the <OceanProvider />.

    2. Use Hooks

    Then within your component use the included hooks to interact with Ocean's functionality. Each hook can be used independently:

    import React from 'react'
    import {
    } from '@oceanprotocol/react'
    const did = 'did:op:0x000000000'
    export default function MyComponent() {
      // Get Ocean instance from built-in OceanProvider context
      const { ocean, web3, account } = useOcean()
      // Get metadata for this asset
      const { title, metadata, price } = useMetadata(did)
      // publish asset
      const { publish, publishStep } = usePublish()
      // consume asset
      const { consume, consumeStep } = useConsume()
      async function handleDownload() {
        await consume(did)
      return (
          <p>Price: {price}</p>
          <p>Your account: {account}</p>
          <button onClick={handleDownload}>
            {consumeStep || 'Download Asset'}

    📖 Documentation

    There is also an example app based on Create React App under example/.

    🦑 Development

    The project is authored with TypeScript and compiled with tsc.

    To start compiler in watch mode:

    npm start

    Code Style

    For linting and auto-formatting you can use from the root of the project:

    # auto format all ts & css with eslint & stylelint
    npm run lint
    # auto format all ts & css with prettier, taking all configs into account
    npm run format

    👩‍🔬 Testing

    🛳 Production

    The build script will compile src/ with microbundle into:

    1. CommonJS module
    2. ES module
    3. UMD build
    npm run build

    ⬆️ Releases

    Releases are managed semi-automatically. They are always manually triggered from a developer's machine with release scripts.


    From a clean main branch you can run any release task bumping the version accordingly based on semantic versioning:

    • To bump a patch version: npm run release
    • To bump a minor version: npm run release -- minor
    • To bump a major version: npm run release -- major

    Every task does the following:

    • bumps the project version in package.json, package-lock.json
    • auto-generates and updates the CHANGELOG.md file from commit messages
    • creates a Git tag
    • commits and pushes everything
    • creates a GitHub release with commit messages as description
    • GitHub release will trigger a GitHub Actions workflow to do a npm release

    For the GitHub releases steps a GitHub personal access token, exported as GITHUB_TOKEN is required. Setup


    Usually from a feature branch you can release a develop version under the next npm tag.

    Say the current version is at v1.1.0, then to publish a pre-release for a next major version v2.0.0-beta.0, do:

    npm run release -- major --preRelease=beta --npm.tag=next
    # consecutive releases, e.g. to then get `v2.0.0-beta.1`
    npm run release -- --preRelease
    # final version, e.g. to then get `v2.0.0`
    npm run release -- major

    📜 Changelog

    See the CHANGELOG.md file.

    🎁 Contribute

    See the page titled "Ways to Contribute" in the Ocean Protocol documentation.

    🧜 Authors

    Created based on the work and learnings of the Ocean Protocol marketplace team:

    🏛 License

    Copyright ((C)) 2021 Ocean Protocol Foundation Ltd.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.




    npm i @oceanprotocol/react

    DownloadsWeekly Downloads






    Unpacked Size

    612 kB

    Total Files


    Last publish


    • leucothia
    • kremalicious
    • alexbigchaindb