Gathering detailed insights and metrics for react-common-use-components
Gathering detailed insights and metrics for react-common-use-components
Gathering detailed insights and metrics for react-common-use-components
Gathering detailed insights and metrics for react-common-use-components
@patternfly/react-core
This library provides a set of common React components for use with the PatternFly reference implementation.
@oneuptime/common
The OneUptime Common UI Library is a collection of shared components, utilities that are used across the OneUptime platform. It is designed to be easy to install and use, and to be extensible. This library is built with React and TypeScript. It includes c
@iyio/react-common
The `@iyio/react-common` library contains a set of unstyled components and hooks for common uses cases within the IYIO framework. All the components in the library use a layout system referred to as **BaseLayout**
@bitsolve/react-common
Basic components and helpers for React applications (internal use)
npm install react-common-use-components
Typescript
Module System
Node Version
NPM Version
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
13
A library of commonly used React components,Contains the following components: FlexBox, CountDown,InfiniteScroll,Modal,ToastProvider,Toast,Uploader
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');
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
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 |
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 }} onClick={onClick} status={startTimer}/> 23 </div> 24 ); 25}; 26 27export default YourComponent; 28
name | type | description |
---|---|---|
startTimer | boolean | timer switch |
onClick | function | callback function |
style | CSSProperties | countdown style |
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
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 |
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;
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 |
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
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 |
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
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 |
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
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 |
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
name | params | type | description |
---|---|---|---|
onClick | () => {} | function | click function |
style | {background:'rgba(0,0,0,0.5)'} | CSSProperties | FlexBox style |
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
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 |
1//App.js 2import React, {useState} from 'react'; 3import {Tabs} from "react-common-use-components"; 4 5const App = () => { 6 const tabItems = [{key: '1', label: '香蕉'}, {key: '2', label: '哈密瓜'}] 7 return ( 8 <div> 9 <Tabs items={tabItems} 10 defaultActiveKey={1} 11 onChange={(key) => { 12 console.log(key) 13 }} 14 /> 15 </div> 16 ); 17}; 18 19export default App; 20
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 |
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
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 |
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
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 |
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
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 |
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
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 |
No vulnerabilities found.
No security vulnerabilities found.