@mrtujiawei/react-components NPM

@mrtujiawei/react-components

安装

使用 npm:

$ npm install @mrtujiawei/react-components

使用 yarn:

$ yarn add @mrtujiawei/react-components

使用 unpkg CDN:

注意: 使用 CDN 时，需要将React暴露到全局中

<!-- 开发环境 -->
<script src="https://unpkg.com/@mrtujiawei/react-components/dist/umd/index.js"></script>

<!-- 生产环境 -->
<script src="https://unpkg.com/@mrtujiawei/react-components/dist/umd/index.min.js"></script>

使用 jsdelivr CDN:

注意: 使用 CDN 时，需要将React暴露到全局中

<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/@mrtujiawei/react-components/dist/umd/index.js"></script>

<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/@mrtujiawei/react-components/dist/umd/index.min.js"></script>

使用

List

虚拟滚动列表

基本使用

import { List } from '@mrtujiawei/react-components';
import type { ListProps } from '@mrtujiawei/react-components';

const BasicList = () => {
  const itemCount = 1000;
  const dataList: number[] = Array.from(
    { length: itemCount },
    (_, index) => index + Math.random()
  );
  const height = 500;

  const Item: ListProps<number>['children'] = (props) => (
    <div style={props.style}>
      {props.index == itemCount ? '加载中...' : dataList[props.index]}
    </div>
  );

  return (
    <List itemCount={itemCount} itemSize={50} height={height}>
      {Item}
    </List>
  );
};

上拉加载

import { useState } from 'react';
import { List } from '@mrtujiawei/react-components';
import type { ListProps } from '@mrtujiawei/react-components';

const ListDemo = () => {
  const [hasMore, _setHasMore] = useState(true);
  const [itemCount, setItemCount] = useState(0);
  const [winHeight] = useState(() => {
    return document.documentElement.clientHeight;
  });

  const loadMore = async (_start: number, _end: number) => {
    setItemCount((itemCount) => itemCount + 20);
  };

  const Item: ListProps<unknown>['children'] = (props) => (
    <div style={props.style}>
      {props.index == itemCount ? '加载中...' : props.index}
    </div>
  );

  return (
    <List
      itemCount={itemCount}
      itemSize={50}
      height={winHeight}
      hasMore={hasMore}
      loadMore={loadMore}
    >
      {Item}
    </List>
  );
};

Props

height: number