@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: 当前登录用户的用户名 ('lulu@btcchina.com' 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="lulu@btcchina.com"
logout={() => console.log('logout')}
/>
)