mirror of
https://github.com/oceanprotocol/react.git
synced 2024-12-23 01:29:49 +01:00
🎣 React hooks & components on top of squid.js
src | ||
.eslintrc | ||
.gitignore | ||
.prettierrc | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json |
react
🎣 React hooks & components on top of squid.js
WE ARE IN HARDWARE MODE. This project is in a conceptual phase and nothing works.
Table of Contents
- 🏗 Installation
- 🏄 Usage
- 🦑 Development
- ✨ Code Style
- 👩🔬 Testing
- 🛳 Production
- ⬆️ Releases
- 📜 Changelog
- 🎁 Contribute
- 🧜 Authors
- 🏛 License
🏗 Installation
npm install @oceanprotocol/react
🏄 Usage
First, wrap your App with the OceanProvider
and provide its config object:
import React from 'react'
import { OceanProvider, Config } from '@oceanprotocol/react'
const config: Config = {
nodeUri: '',
...
}
export default function MyApp({ children }: { children: React.ReactNode }): React.ReactNode {
return (
<OceanProvider config={config}>
<h1>My App</h1>
{children}
</OceanProvider>
)
}
Then within your component use the provided hooks to interact with Ocean's functionality:
import React from 'react'
import { useOcean, useConsume } from '@oceanprotocol/react'
export default function MyComponent() {
// Initialize, get existing, or reinitialize Ocean
const { ocean, account } = useOcean()
// publish asset
const { publish, publishStep } = usePublish()
// consume asset
const { consume, consumeStep } = useConsume()
async function handleClick() {
const ddo = 'did:op:0x000000000'
await consume(ddo)
}
return (
<div>
Your account: {account}
<button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
</div>
)
}
🦑 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 tsc
into:
- CommonJS module with ES5 syntax
- ES module with ES5 syntax
npm run build
⬆️ Releases
📜 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 2020 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
http://www.apache.org/licenses/LICENSE-2.0
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.