@btcchina-components(BTCChina 公共组件库)

Background

上线项目越来越多，每个项目有相同的组件在独立维护，造成了维护工作的重复性。

Technology

https://github.com/storybooks/react-cdk

Use

Step 1

npm install @btcchina-components/components

Step2

import {component} from '@btcchina-components/components/dist/components/{component}'
// example: import Header from '@btcchina-components/components/dist/components/Header'

Step3

按照组件具体使用方式在项目中进行使用

Components

Header

props:

• lang: 当前用户使用的语言（'zh' or 'en'）
• env: 当前项目所在的环境 （'development', 'staging' or 'production'）
• email: 当前登录用户的用户名 （'[email protected]' or ''）
• logout: 用户点击登出函数，具体登出操作需在具体项目中实现
• hideLogin: 是否显示登录按钮和登录状态，默认显示，若不显示传入true

注： email为空时为未登录状态，显示登录注册按钮，否则显示用户名和登出按钮

Functions

• 样式的实现
• 响应式的实现
• 点击登录和注册会分别跳到主页和注册页，用户登录或者注册成功后将会返回对应的页面

Footer

props:

• lang: 当前用户使用的语言（'zh' or 'en'）
• env: 当前项目所在的环境 （'development', 'staging' or 'production'）
• changeLang('zh' or 'en'): 用户点击切换语言时执行的操作，具体切换语言操作需在项目中实现

Functions

• 样式的实现
• 响应式的实现

ContactUs

props

• lang: 当前用户使用的语言（'zh' or 'en'）

Functions

• 页面侧边联系方式组件，实现动态加逸创云客服三方库

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Header from '@btcchina-components/components/dist/components/Header'

ReactDOM.render(
    <Header
        env="development"
        lang="zh"
        email="[email protected]"
        logout={() => console.log('logout')}
    />
)