mirror of
https://github.com/oceanprotocol/react.git
synced 2025-02-14 21:10:38 +01:00
readme changed a bit
This commit is contained in:
parent
f2206185b1
commit
2794931110
75
README.md
75
README.md
@ -1,6 +1,6 @@
|
|||||||
[](https://oceanprotocol.com)
|
# React - Ocean V3
|
||||||
|
|
||||||
<h1 align="center">react</h1>
|
[](https://oceanprotocol.com)
|
||||||
|
|
||||||
> 🎣 React hooks & components on top of @oceanprotocol/lib
|
> 🎣 React hooks & components on top of @oceanprotocol/lib
|
||||||
|
|
||||||
@ -15,46 +15,69 @@
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and most stuff changes weekly. More importantly, it only works against bleeding edge v3 components of Ocean Protocol which are not completely public yet.**
|
**WE ARE IN A HARDWARE MODE. This project is in a conceptual phase and most things change weekly. More importantly, it only works against bleeding edge v3 components of Ocean Protocol which are not completely public yet.**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Table of Contents**
|
## Table of Contents
|
||||||
|
|
||||||
- [🏗 Installation](#-installation)
|
- [React - Ocean V3](#react---ocean-v3)
|
||||||
- [🏄 Quick Start](#-quick-start)
|
- [Table of Contents](#table-of-contents)
|
||||||
- [1. Add Provider](#1-add-provider)
|
- [🏗 Installation](#-installation)
|
||||||
- [2. Use Hooks](#2-use-hooks)
|
- [🏄 Quick Start](#-quick-start)
|
||||||
- [📖 Documentation](#-documentation)
|
- [1. Add Provider](#1-add-provider)
|
||||||
- [🦑 Development](#-development)
|
- [2. Use Hooks](#2-use-hooks)
|
||||||
- [✨ Code Style](#-code-style)
|
- [📖 Documentation](#-documentation)
|
||||||
- [👩🔬 Testing](#-testing)
|
- [🦑 Development](#-development)
|
||||||
- [🛳 Production](#-production)
|
- [✨ Code Style](#-code-style)
|
||||||
- [⬆️ Releases](#️-releases)
|
- [👩🔬 Testing](#-testing)
|
||||||
- [Production](#production)
|
- [🛳 Production](#-production)
|
||||||
- [Pre-Releases](#pre-releases)
|
- [⬆️ Releases](#️-releases)
|
||||||
- [📜 Changelog](#-changelog)
|
- [Production](#production)
|
||||||
- [🎁 Contribute](#-contribute)
|
- [Pre-Releases](#pre-releases)
|
||||||
- [🧜 Authors](#-authors)
|
- [📜 Changelog](#-changelog)
|
||||||
- [🏛 License](#-license)
|
- [🎁 Contribute](#-contribute)
|
||||||
|
- [🧜 Authors](#-authors)
|
||||||
|
- [🏛 License](#-license)
|
||||||
|
|
||||||
## 🏗 Installation
|
## 🏗 Installation
|
||||||
|
|
||||||
|
For use in your repo, install this library with the following command (you can alternatively use `yarn`, of course)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @oceanprotocol/react
|
npm install @oceanprotocol/react
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If you want to clone this repo and work locally, then execute the following **instead** (in the root directory of this repository)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
## 🏄 Quick Start
|
## 🏄 Quick Start
|
||||||
|
|
||||||
### 1. Add Provider
|
### 1. Add Provider
|
||||||
|
|
||||||
First, wrap your whole app with the [`<OceanProvider />`](src/providers/OceanProvider).
|
First, wrap your whole app with [`<OceanProvider>`](src/providers/OceanProvider) component, i.e.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import { OceanProvider } from "@oceanprotocol/react";
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<OceanProvider>
|
||||||
|
<YourApp />
|
||||||
|
<OceanProvider />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### 2. Use Hooks
|
### 2. Use Hooks
|
||||||
|
|
||||||
Then within your component use the included hooks to interact with Ocean's functionality. Each hook can be used independently:
|
Then within your component use the included hooks to interact with Ocean's functionality. Each hook can be used independently:
|
||||||
|
|
||||||
```tsx
|
```jsx
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
|
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
|
||||||
|
|
||||||
@ -100,13 +123,13 @@ export default function MyComponent() {
|
|||||||
- [useConsume](src/hooks/useConsume/)
|
- [useConsume](src/hooks/useConsume/)
|
||||||
- [useCompute](src/hooks/useCompute/)
|
- [useCompute](src/hooks/useCompute/)
|
||||||
|
|
||||||
There is also an example app based on Create React App under [`example/`](example/).
|
There is also an example app in [`example/`](example/) directory of this repo.
|
||||||
|
|
||||||
## 🦑 Development
|
## 🦑 Development
|
||||||
|
|
||||||
The project is authored with TypeScript and compiled with `tsc`.
|
The project uses TypeScript and compiled with the `tsc` command.
|
||||||
|
|
||||||
To start compiler in watch mode:
|
To start the compiler in watch mode:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm start
|
npm start
|
||||||
@ -114,7 +137,7 @@ npm start
|
|||||||
|
|
||||||
## ✨ Code Style
|
## ✨ Code Style
|
||||||
|
|
||||||
For linting and auto-formatting you can use from the root of the project:
|
For linting and auto-formatting run these from the root of the repo:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# auto format all ts & css with eslint & stylelint
|
# auto format all ts & css with eslint & stylelint
|
||||||
|
Loading…
x
Reference in New Issue
Block a user