react-common-use-components

react-common-use-components

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

Install

  npm install --save react-common-use-components

  or

  yarn add react-common-use-components

  // in code ES6
  import InfiniteScroll from 'react-common-use-components';
  // or commonjs
  var InfiniteScroll = require('react-common-use-components');

Using

Button

import React, {useState} from 'react';
import {Button} from "react-common-use-components";

const YourComponent = () => {
    const onClick = () => {

    }
    return (
        <div>
            <Button type={'primary'} disabled={false} onClick={onClick} isDebounce={true}
                    debounceDelay={2000}>购买</Button>
        </div>
    );
};

export default YourComponent;

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

import React, {useState} from 'react';
import {CountDown} from "react-common-use-components";

const YourComponent = () => {
    const [startTimer, setStartTimer] = useState(false)
    const onClick = () => {
        setStartTimer(true)
    }
    return (
        <div>
            <CountDown style={{
                width: "8rem",
                height: "1.25rem",
                borderRadius: "0.375rem",
                textAlign: 'center',
                lineHeight: "1.25rem",
                fontsize: "1.25rem !important",
                marginRight: "0.25rem",
                backgroundColor: "#F8F8F8",
                color: '#3370DA',
                cursor: "pointer"
            }} onClick={onClick} status={startTimer}/>
        </div>
    );
};

export default YourComponent;

CountDown props

name	type	description
startTimer	boolean	timer switch
onClick	function	callback function
style	CSSProperties	countdown style

InfiniteScroll

import React, {useState, useEffect} from 'react';
import {InfiniteScroll} from "react-common-use-components";
import {getList} from "services"

const YourComponent = () => {
    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(0)
    useEffect(() => {
        //get list data
        getList({page: page, limit: 10}).then((res) => {
            if (res.data.code === 0) {
                if (page === 0) {
                    setList(res.data.list)
                } else {
                    setList([...list, ...res.data.list])
                }
            }
        })
    }, [page])

    function loadMore() {
        if (page * 10 > total) {
            return;
        }
        let nextPage = page + 1
        setPage(nextPage)
    }

    return (
        <InfiniteScroll loadMore={loadMore}
                        hasMore={list.length < total}
                        dataLength={list.length}
                        total={total}
                        threshold={25}
        >
            {list.map((item, index) => {
                return (
                    <YourChildComponent key={index}/>
                )
            })}
        </InfiniteScroll>
    );
};

export default YourComponent;

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

//App.js
import React, {useState} from 'react';
import {ToastProvider} from "react-common-use-components";

const App = () => {
    return (
        <ToastProvider>
            {/*Your child pages or child components*/}
            <ChildComponent/>
        </ToastProvider>
    );
};

export default App;

//Home.js
import React, {useState} from 'react';
import {Toast} from "react-common-use-components";

const Home = () => {
    return (
        <div onClick={() => Toast.show({text: 'hello', type: 'success', duration: 2000})}>
            home page
        </div>
    );
};

export 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

//App.js
import React, {useState} from 'react';
import {Modal} from "react-common-use-components";

const App = () => {
    const [modal, setModal] = useState(false)
    return (
        <div>
            <Modal position={"center"} onClose={() => {
                setModal(false)
            }} openModal={modal}>
                {/*Your modal child components*/}
            </Modal>
            {/*Your child pages or child components*/}
            <ChildComponent/>
        </div>
    );
};

export default App;

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

//App.js
import React, {useState} from 'react';
import {Uploader} from "react-common-use-components";

const App = () => {
    const callback = (file) => {
        console.log('file:', file)
    }
    return (
        <div>
            <Uploader accept={'image/*'} id={'upload-img'} style={{width: "1.5rem", height: "3rem",}}
                      onSuccess={(file) => {
                          callback(file)
                      }}>
                <ChildComponent/>
            </Uploader>
        </div>
    );
};

export default App;

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

//App.js
import React, {useState} from 'react';
import {PreviewVideo, Button} from "react-common-use-components";

const App = () => {

    return (
        <div>
            <PreviewVideo autoPlay={true} url={'your video url'}>
                <Button type={'primary'}>预览</Button>
            </PreviewVideo>
        </div>
    );
};

export default App;

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

//App.js
import React, {useState} from 'react';
import {FlexBox} from "react-common-use-components";

const App = () => {
    return (
        <div>
            <FlexBox style={{justifyContent: "flex-start",}} onClick={(file) => {
            }}>
                <ChildComponent/>
            </FlexBox>
        </div>
    );
};

export default App;

FlexBox props

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

Tabs

//App.js
import React, {useState} from 'react';
import {Tabs} from "react-common-use-components";

const App = () => {
    const tabItems = [{key: '1', label: '香蕉'}, {key: '2', label: '哈密瓜'}]
    return (
        <div>
            <Tabs items={tabItems}
                  defaultActiveKey={1}
                  onChange={(key) => {
                      console.log(key)
                  }}
            />
        </div>
    );
};

export default App;

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

ProgressBar

//App.js
import React, {useState} from 'react';
import {ProgressBar} from "react-common-use-components";

const App = () => {
    return (
        <div>
            <ProgressBar percent={20}/>
        </div>
    );
};

export default App;

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

//App.js
import React from 'react';
import {AudioPlayer} from "react-common-use-components";

const App = () => {
    return (
        <div>
            <AudioPlayer url={'https://example.cpm/xxx.mp4'}/>
        </div>
    );
};

export default App;

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

//App.js
import React from 'react';
import {AudioPlayer} from "react-common-use-components";

const App = () => {
    return (
        <VideoPlayer width={"80vw"} height={"80vh"} url={'https://xxxx.mp4'}/>
    );
};

export default App;

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

//App.js
import React from 'react';
import {PasswordInput} from "react-common-use-components";

const App = () => {
    return (
        <div>
            <PasswordInput/>
        </div>
    );
};

export default App;

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