3box-react-hooks 中文文档教程
3box-react-hooks
React hooks wrapping 3box API
Changelog
2.0.0 有一个更符合 3box API 的新 API。 新版本还支持使用 3box-react-hooks/dist/api 进行更轻量级的构建。
Installation
npm i -S 3box-react-hooks
Api
|函数|参数|返回|对应于| |-|-|-|-| |useProfile|地址[, opts]|profile|Box.getProfile| |usePublicSpace|地址，空间名称[, opts]|space|Box.getSpace| ||||| |useBox|地址，提供者[，选择]|box|Box.openBox| |useSpace|空间名称, box[, opts]|space|box.openSpace| ||||| |useDelayedBox|地址，提供者[，选择]|[框，打开]|-| |useDelayedSpace|空间名称, box[, opts]|[space, open]|-|
Delayed box and space
延迟挂钩可用于延迟身份验证。 例如，当用户按下身份验证按钮时是否应打开一个框。 钩子的返回值包含 box/space，在通过身份验证之前为空，open 是打开框/空格的函数。
如果盒子和空间应该同时打开，只有盒子需要延迟，因为空间在打开之前等待盒子不为空。 下面有一个例子。
Optimize build for read-only operations
useProfile 和 usePublicSpace 可以通过导入 3box-react-hooks/dist/api 来使用，以获得更轻量级的构建。
Example
import { useProfile, useBox, useSpace } from '3box-react-hooks';
const MyComponent = (props) => {
const address = '0x88E146E0fd0F5AaCbc4f94365dF9f599A90139F1';
const profile = useProfile(address);
const box = useBox(address, window.ethereum);
const space = useSpace('exampleSpace', box);
const email = await box.private.get('email');
const spaceValue = await space.private.get('key');
return (
<>
<div>{profile.emoji}</div>
<div>{email}</div>
<div>{spaceValue}</div>
</>
);
}
Delayed box and space
import { useDelayedBox, useSpace } from '3box-react-hooks';
const MyComponent = (props) => {
const address = '0x88E146E0fd0F5AaCbc4f94365dF9f599A90139F1';
const [box, open] = useDelayedBox(address, window.ethereum);
const space = useSpace('exampleSpace', box);
const email = await box.private.get('email');
const spaceValue = await space.private.get('key');
return (
<>
<div>{email}</div>
<div>{spaceValue}</div>
<button onClick={open}>Authenticate</button>
</>
);
}
3box-react-hooks
React hooks wrapping 3box API
Changelog
2.0.0 has a new API that is more in line with the 3box API. The new version also enables more lightweight builds with 3box-react-hooks/dist/api.
Installation
npm i -S 3box-react-hooks
Api
|Function|Arguments|Return|Corresponds to| |-|-|-|-| |useProfile|address[, opts]|profile|Box.getProfile| |usePublicSpace|address, space name[, opts]|space|Box.getSpace| ||||| |useBox|address, provider[, opts]|box|Box.openBox| |useSpace|space name, box[, opts]|space|box.openSpace| ||||| |useDelayedBox|address, provider[, opts]|[box, open]|-| |useDelayedSpace|space name, box[, opts]|[space, open]|-|
Delayed box and space
Delayed hooks can be used to postpone authentication. For example if a box should be opened when the user presses an authentication button. The return value from the hooks contains box/space which is null until authenticated and open which is a function that opens the box/space.
If the box and spaces are supposed to be opened at the same time, only the box needs to be delayed since the space waits for box to not be null before opening. There's an example below.
Optimize build for read-only operations
useProfile and usePublicSpace can be used by importing 3box-react-hooks/dist/api for a more lightweight build.
Example
import { useProfile, useBox, useSpace } from '3box-react-hooks';
const MyComponent = (props) => {
const address = '0x88E146E0fd0F5AaCbc4f94365dF9f599A90139F1';
const profile = useProfile(address);
const box = useBox(address, window.ethereum);
const space = useSpace('exampleSpace', box);
const email = await box.private.get('email');
const spaceValue = await space.private.get('key');
return (
<>
<div>{profile.emoji}</div>
<div>{email}</div>
<div>{spaceValue}</div>
</>
);
}
Delayed box and space
import { useDelayedBox, useSpace } from '3box-react-hooks';
const MyComponent = (props) => {
const address = '0x88E146E0fd0F5AaCbc4f94365dF9f599A90139F1';
const [box, open] = useDelayedBox(address, window.ethereum);
const space = useSpace('exampleSpace', box);
const email = await box.private.get('email');
const spaceValue = await space.private.get('key');
return (
<>
<div>{email}</div>
<div>{spaceValue}</div>
<button onClick={open}>Authenticate</button>
</>
);
}
