lei-react-lib v1.0.4

这是一个react组件库，里面包含Toast组件、数字滚动NumberAnimation组件（老虎机效果）、图片懒加载LazyImage组件、Loading组件、Popup弹出层组件、Collapse折叠面板组件、数字动画组件、List组件，支持ts类型检查。

安装

npm install lei-react-lib

Popup组件的参数：

// 例子
import { Popup } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'

<Popup 
    showPop={isshow}
    popCallBack={() => {}}
    bgColor="rgba(0,0,0,0.8)"
    clickClose={true}
    showClose={true}
    animPos="Bottom"
    isAutoClose={true}
    duration={2500}
>
    <div>这是内容</div>
</Popup>

Collapse组件的参数：

// 例子
import { Collapse } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'

<Collapse isOpen={isshow}>
    <div>这是内容</div>
</Collapse>

CountTo组件(须版本 >= 0.0.5)：

// 例子
import { CountTo } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'

<CountTo start={10.45} isFormat={false} duration={1200} end={5080.89} />

List组件(须版本 >= 0.0.8)：

// 例子
import { VirtualList } from 'lei-react-lib'
import type { ListItemProps } from "lei-react-lib";
import 'lei-react-lib/dist/assets/index.css'

const [data, setdata] = useState<ListItemProps[]>([]);
const [hasNext, sethasNext] = useState<boolean>(true);

<VirtualList 
    items={data}
    itemHeight={50}
    renderItem={(item, index) => <div>{item.name}</div>}
    hasNext={hasNext}
    loadMore={() => {}}
/>

Toast组件(须版本 >= 0.0.9)：

// 例子
import { Toast } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'

Toast({
    message: '这是一条toast'
})
Toast({
    message: '这是一条toast',
    duration: 2000,
    onClose: () => {}
})

Loading组件(须版本 >= 0.0.9)：

Loading组件的事件：

// 例子
import { Loading } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/index.css'

Loading.show()
Loading.show({
    text: '加载中...',
    color: '#0094ff',
    bgColor: 'rgba(0,0,0,0.8)'
})
Loading.hide()

图片懒加载LazyImage组件(须版本 >= 1.0.3)：

// 例子
import { LazyImage } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/style.css'

<LazyImage src="https://img.yzcdn.cn/vant/cat.jpeg" width="100px" height="100px" />

数字滚动组件NumberAnimation (须版本 >= 1.0.3)

// 例子
import { NumberAnimation } from 'lei-react-lib'
import 'lei-react-lib/dist/assets/style.css'

<NumberAnimation value={1000} />

注意事项

请确保react版本 >= 16.8.0