react-common-use-components v1.1.6

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

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

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

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

| 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

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

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

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

AudioRecorder

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

const App = () => {
    return (
        <div>
            <AudioRecorder callback={(file,duration) => {}}/>
        </div>
    );
};

export default App;

AudioRecorder props

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

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

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

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

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

LICENSE

MIT