react-common-use-components

v1.1.5

Published

a month ago

A React mobile commonly used component library

Downloads

222

0High
0Medium
0Low

lhw_andy_li

react react-common-components components modal count-down toast infinite-scroll preview-video progress-bar audio-player password-input video-player

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

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 | | video play icon | | 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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-common-use-components

Install

Using

Button

Button props

CountDown

CountDown props

InfiniteScroll

InfiniteScroll props

Toast

Toast props

Modal

Modal props

Uploader

Uploader props

PreviewVideo

PreviewVideo props

FlexBox

FlexBox props

Tabs

Tabs props

ProgressBar

ProgressBar props

AudioPlayer

AudioPlayer props

VideoPlayer

VideoPlayer props

PasswordInput

PasswordInput props

LICENSE