react-common-use-components

A library of commonly used React components,Contains the following components: FlexBox, CountDown,InfiniteScroll,Modal,ToastProvider,Toast,Uploader

Install

1  npm install --save react-common-use-components
2
3  or
4
5  yarn add react-common-use-components
6
7  // in code ES6
8  import InfiniteScroll from 'react-common-use-components';
9  // or commonjs
10  var InfiniteScroll = require('react-common-use-components');

Using

Button

1import React, {useState} from 'react';
2import {Button} from "react-common-use-components";
3
4const YourComponent = () => {
5    const onClick = () => {
6
7    }
8    return (
9        <div>
10            <Button type={'primary'} disabled={false} onClick={onClick} isDebounce={true}
11                    debounceDelay={2000}>购买</Button>
12        </div>
13    );
14};
15
16export default YourComponent;
17

Button props

name	params	type	description
onClick	() => {}	function	click function
type	'default','primary','success','danger','warning'	string	button type
debounceDelay	5000	number	Anti shake delay time
isDebounce	false	boolean	Is click stabilization enabled
disabled	false	boolean	Is disabled

CountDown

1import React, {useState} from 'react';
2import {CountDown} from "react-common-use-components";
3
4const YourComponent = () => {
5    const [startTimer, setStartTimer] = useState(false)
6    const onClick = () => {
7        setStartTimer(true)
8    }
9    return (
10        <div>
11            <CountDown style={{
12                width: "8rem",
13                height: "1.25rem",
14                borderRadius: "0.375rem",
15                textAlign: 'center',
16                lineHeight: "1.25rem",
17                fontsize: "1.25rem !important",
18                marginRight: "0.25rem",
19                backgroundColor: "#F8F8F8",
20                color: '#3370DA',
21                cursor: "pointer"
22            }} onChange={(count,status) => {
23              console.log(status,count)
24            }} onClick={onClick} status={startTimer}/>
25        </div>
26    );
27};
28
29export default YourComponent;
30

参数： onClick: 点击事件 open: 是否开启倒计时,点击后触发倒计时 defaultOpen: 默认是否开启倒计时，直接开始倒计时,默认false initText: 初始文本 startText: 开始倒计时文本 endText: 倒计时结束文本 textStyle: 文本样式 containerStyle: 容器样式 duration: 倒计时时间 默认60秒 onChange: (count:number) => {} 倒计时变化时的回调函数 count:当前倒计时剩余时间

CountDown props

name	prams	type	description
onClick	() => void	function	click function
open	true	boolean	timer switch
defaultOpen	false	boolean	default timer switch
initText	'get code'	string	initial text
startText	's'	string	start text
endText	'resend'	string	end text
textStyle	{color:'#3370DA',fontSize:'1.25rem'}	CSSProperties	text style
containerStyle	{width:'8rem'}	container style
duration	60	number	duration
onChange	(count: number, status: number) => void	(count: number, status: number) => void	countdown change callback function

InfiniteScroll

1import React, {useState, useEffect} from 'react';
2import {InfiniteScroll} from "react-common-use-components";
3import {getList} from "services"
4
5const YourComponent = () => {
6    const [list, setList] = useState([])
7    const [total, setTotal] = useState(0)
8    const [page, setPage] = useState(0)
9    useEffect(() => {
10        //get list data
11        getList({page: page, limit: 10}).then((res) => {
12            if (res.data.code === 0) {
13                if (page === 0) {
14                    setList(res.data.list)
15                } else {
16                    setList([...list, ...res.data.list])
17                }
18            }
19        })
20    }, [page])
21
22    function loadMore() {
23        if (page * 10 > total) {
24            return;
25        }
26        let nextPage = page + 1
27        setPage(nextPage)
28    }
29
30    return (
31        <InfiniteScroll loadMore={loadMore}
32                        hasMore={list.length < total}
33                        dataLength={list.length}
34                        total={total}
35                        threshold={25}
36        >
37            {list.map((item, index) => {
38                return (
39                    <YourChildComponent key={index}/>
40                )
41            })}
42        </InfiniteScroll>
43    );
44};
45
46export default YourComponent;
47

InfiniteScroll props

name	type	description
loadMore	function	load more callback functions
hasMore	boolean	Do you have any more data
dataLength	number	list or data length
total	number	list or data total
threshold	number	The distance from the bottom of the container, triggered by the callback function when touching the bottom, in pixels
end	reactNode	end component
loading	reactNode	loading component

Toast

1//App.js
2import React, {useState} from 'react';
3import {ToastProvider} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <ToastProvider>
8            {/*Your child pages or child components*/}
9            <ChildComponent/>
10        </ToastProvider>
11    );
12};
13
14export default App;
15
16//Home.js
17import React, {useState} from 'react';
18import {Toast} from "react-common-use-components";
19
20const Home = () => {
21    return (
22        <div onClick={() => Toast.show({text: 'hello', type: 'success', duration: 2000})}>
23            home page
24        </div>
25    );
26};
27
28export default Home;

Toast props

name	params	type	description
show	{text,type,duration}	function	open toast function
text	'hello'	string	open toast text
type	success,fail,warning,loading	string	toast status
**
duration**	2000	number	Prompt duration, if 0, will not automatically close, default to 2000
show	{timeout}	function	Close the current toast
timeout	2000	number	Delaying Toast shutdown time

Modal

1//App.js
2import React, {useState} from 'react';
3import {Modal} from "react-common-use-components";
4
5const App = () => {
6    const [modal, setModal] = useState(false)
7    return (
8        <div>
9            <Modal position={"center"} onClose={() => {
10                setModal(false)
11            }} openModal={modal}>
12                {/*Your modal child components*/}
13            </Modal>
14            {/*Your child pages or child components*/}
15            <ChildComponent/>
16        </div>
17    );
18};
19
20export default App;
21

Modal props

name	params	type	description
openModal	false	boolean	open modal
position	top,right,bottom,left	string	modal position
onClose	success,fail,warning,loading	function	close the current modal
style	{background:'rgba(0,0,0,0.5)'}	CSSProperties	Modal container style

Uploader

1//App.js
2import React, {useState} from 'react';
3import {Uploader} from "react-common-use-components";
4
5const App = () => {
6    const callback = (file) => {
7        console.log('file:', file)
8    }
9    return (
10        <div>
11            <Uploader accept={'image/*'} id={'upload-img'} style={{width: "1.5rem", height: "3rem",}}
12                      onSuccess={(file) => {
13                          callback(file)
14                      }}>
15                <ChildComponent/>
16            </Uploader>
17        </div>
18    );
19};
20
21export default App;
22

Uploader props

name	params	type	description
id	'uploader_1'	string	uploader id
accept	'image/*	string	input attribute, restricting file types
onSuccess	(file) => {}	function	callback function for successful file selection
style	{background:'rgba(0,0,0,0.5)'}	CSSProperties	Uploader container style

PreviewVideo

1//App.js
2import React, {useState} from 'react';
3import {PreviewVideo, Button} from "react-common-use-components";
4
5const App = () => {
6
7    return (
8        <div>
9            <PreviewVideo autoPlay={true} url={'your video url'}>
10                <Button type={'primary'}>预览</Button>
11            </PreviewVideo>
12        </div>
13    );
14};
15
16export default App;
17

PreviewVideo props

name	params	type	description
url	''	string	video url
autoPlay	true	boolean	autoplay video
playIcon	require file or image url	string
videoStyle	{width:"200px"}	CSSProperties	video style

FlexBox

1//App.js
2import React, {useState} from 'react';
3import {FlexBox} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <div>
8            <FlexBox style={{justifyContent: "flex-start",}} onClick={(file) => {
9            }}>
10                <ChildComponent/>
11            </FlexBox>
12        </div>
13    );
14};
15
16export default App;
17

FlexBox props

name	params	type	description
onClick	() => {}	function	click function
style	{background:'rgba(0,0,0,0.5)'}	CSSProperties	FlexBox style

AudioRecorder

1//App.js
2import React, {useState} from 'react';
3import {AudioRecorder} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <div>
8            <AudioRecorder callback={(file,duration) => {}}/>
9        </div>
10    );
11};
12
13export default App;
14

AudioRecorder props

name	params	type	description
callback	(file:File,duration:number) => {}	function	The callback function after completing the recording
statusContainerStyle	{background:'rgba(0,0,0,0.5)'}	CSSProperties	status container style
durationStyle	{color:'#000000'}	CSSProperties	duration text style

Tabs

1//App.js
2import React, {useState} from 'react';
3import {Tabs, Tab} from "react-common-use-components";
4
5const App = () => {
6    const tabItems = [{key:"1",label:"Tab 1"},{key:"2",label:"Tab 2"}]
7    return (
8        <div>
9          <Tabs items={tabItems}>
10            <Tab activeKey={"1"}>
11              <div>
12                Tab 1
13              </div>
14            </Tab>
15            <Tab activeKey={"2"}>
16              <div>
17                Tab 2
18              </div>
19            </Tab>
20          </Tabs>
21        </div>
22    );
23};
24
25export default App;
26

Tabs props

name	params	type	description
items	[{key:string,label:string}]	array	tabs options
containerStyle	{background:'rgba(0,0,0,0.5)'}	CSSProperties	container style
onChange	(key:string) => {}	function	click function
itemStyle	{background:'rgba(0,0,0,0.5)'}	CSSProperties	item style
activeKey	'1'	string	active item
defaultActiveKey	'2'	string	init default item
activeLineColor	'#666666'	string	active item line color

Tab props

name	params	type	description
activeKey	'1'	string	active item key

ProgressBar

1//App.js
2import React, {useState} from 'react';
3import {ProgressBar} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <div>
8            <ProgressBar percent={20}/>
9        </div>
10    );
11};
12
13export default App;
14

ProgressBar props

name	params	type	description
percent	20	number	Progress value , total is 100
barWidth	"100px"	string	ProgressBar width
barHeight	"16px"	string	ProgressBar height
barBgColor	"#000000"	string	ProgressBar background color
trackBgColor	"#b3b3b3"	string	ProgressBar track background color
min	"100px"	string	ProgressBar min num
max	"16px"	string	ProgressBar max num
onChange	(percent: number) => void	function	Slide the slider to return the callback function of the current precision
isOpenSlideBlock	true	boolean	open the slider operation progress

AudioPlayer

1//App.js
2import React from 'react';
3import {AudioPlayer} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <div>
8            <AudioPlayer url={'https://example.cpm/xxx.mp4'}/>
9        </div>
10    );
11};
12
13export default App;
14

AudioPlayer props

name	params	type	description
url	'https://example.cpm/xxx.mp4'	string	video url
playIcon		ReactNode	play button
pauseIcon		ReactNode	pause button
forwardIcon		ReactNode	Fast forward button
backwardIcon		ReactNode	back button
timeTextStyle	{color:'rgba(0,0,0,0)'}	CSSProperties	play time text style

VideoPlayer

1//App.js
2import React from 'react';
3import {AudioPlayer} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <VideoPlayer width={"80vw"} height={"80vh"} url={'https://xxxx.mp4'}/>
8    );
9};
10
11export default App;
12

VideoPlayer props

name	params	type	description
url	'https://example.cpm/xxx.mp4'	string	video url
playIcon		ReactNode	play button
pauseIcon		ReactNode	pause button
forwardIcon		ReactNode	Fast forward button
backwardIcon		ReactNode	back button
timeTextStyle	{color:'rgba(0,0,0,0)'}	CSSProperties	play time text style
width	"80vw"	string	VideoPlayer width
height	"80vh"	string	VideoPlayer height

PasswordInput

1//App.js
2import React from 'react';
3import {PasswordInput} from "react-common-use-components";
4
5const App = () => {
6    return (
7        <div>
8            <PasswordInput/>
9        </div>
10    );
11};
12
13export default App;
14

PasswordInput props

name	params	type	description
value	''	string	input value
maxLength	6	number	input maxLength
autoFocus	true	boolean	input autoFocus (default: true)
onChange	(value: string) => void	function	input onchange callback method
onSubmit	(value: string) => void	function	The callback function after input completion,this function is triggered when the value length is equal to maxLength
style	{color:'rgba(0,0,0,0)'}	CSSProperties	input container style
inputItemStyle	{color:'rgba(0,0,0,0)'}	CSSProperties	input item style
iconStyle	{color:'rgba(0,0,0,0)'}	CSSProperties	input item icon style

LICENSE

MIT