byted-girls-components

``` npm install -S byted-girls-components

Usage no npm install needed!

<script type="module">
  import bytedGirlsComponents from 'https://cdn.skypack.dev/byted-girls-components';
</script>

README

byted-girls-components

npm install -S byted-girls-components

或者

yarn add byted-girls-components

FansGift

用法

// 入口文件 index.js
import 'byted-girls-components/lib/all.css';

// 页面组件 Biz.jsx
import { FansGift } from 'byted-girls-components';

class Biz extends React.PureComponent {
  render() {
    return (
      <FansGift
        isLogin={isLogin}
        activity={activity}
        activityId={activityId}
        joinActivity={joinActivity}
        registerShare={registerShare}
        share={share}
        sendAppLog={sendAppLog}
        openLoginPanel={openLoginPanel}
      />
    );
  }
}

属性解释

  • isLogin: PropTypes.bool.isRequired
  • activity: PropTypes.object.isRequired
  • activityId: PropTypes.string.isRequired
  • joinActivity: PropTypes.func
  • registerShare: PropTypes.func
  • share: PropTypes.func
  • sendAppLog: PropTypes.func
  • openLoginPanel: PropTypes.func

其中 joinActivity, registerShare, share, sendAppLog, openLoginPanel 的默认实现是 noop

activity 的结构请参考 https://mock.bytedance.net/mock/5af25a0c1e32614dd999f170/girls/web/activity/gift/api#!method=get

Toast

import { Toast } from 'byted-girls-components';

Toast.show('Hello World');

Modal

import { Modal } from 'byted-girls-components';

class MyComponent extends React.PureComponent {
  visible = true;

  closeModal = () => {
    this.setState({visible: false})
  };

  render() {
    return (
      <Modal visible={visible} onClick={this.closeModal}>
        <p> Hello World </p>
      </Modal>
    )
  }
}

Image

自动检测 process.env.PUBLIC_URL，需要的时候，加上这个前缀

import { Image } from 'byted-girls-components';

<Image src="/image/foo.png" />