@blocklet/ui-react/README.md

Some useful front-end web components that can be used in Blocklets.

![@blocklet/ui-react](https://www.arcblock.io/.netlify/functions/badge/?text=@blocklet/ui-react)

> Some useful React components that can be used in Blocklets.

## 安装

```sh
npm install @blocklet/ui-react

# or
yarn add @blocklet/ui-react
```

## 使用

### Header/Footer

```jsx
import Header from '@blocklet/ui-react/lib/Header';
import Footer from '@blocklet/ui-react/lib/Footer';

function App() {
  return (
    <div>
      <Header />
      ...
      <Footer />
    </div>
  );
}
```

`<Header />` 或 `<Footer />` 会获取 blocklet meta (`window.blocklet`) 中的配置信息, 包括 app logo, app name, navigation links 等，然后基于这些配置信息渲染一个 page header 或 page footer。

如果 `<Header />` 上层存在 Session Context Provider，那么 Header 组件会在右侧区域自动渲染一个用户身份信息的按钮 (SessionManager)。
类似的，如果 `<Header />` 上层存在 Locale Context Provider，那么 Header 组件会在右侧区域自动渲染一个语言选择器按钮 (LocaleSelector)。

也可以显式地传入 blocklet meta:  

```jsx
const blockletMeta = {
  appName: 'Blocklet Name',
  appLogo: 'logo url',
  theme: {
    background: '#cfefe8',
  },
  navigation: [
    {
      title: 'Home',
      link: '/',
    },
    ...
  ],
};

function App() {
  return (
    <div>
      <Header blockletMeta={blockletMeta} />
      ...
    </div>
  );
}
```

定制 Header 右侧 addons 区域: 

```jsx
<Header
  blockletMeta={meta}
  addons={addons => {
    return [
      <Button
        variant="contained"
        color="primary"
        size="small"
        style={{ marginRight: 8 }}>
        Addons
      </Button>,
      <Button color="primary" size="small" style={{ marginRight: 8 }}>
        Addons
      </Button>,
      ...addons,
    ];
  }}
/>
```