3box-react-hooks 中文文档教程

Question

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>
    </>
  );
}