react-uis

react component library

Usage no npm install needed!

<script type="module">
  import reactUis from 'https://cdn.skypack.dev/react-uis';
</script>

README

react-uis

React.js ui component

npm version npm downloads license Build Status

Component list

  • Upload
  • Guide

Installation

$ npm install react-uis --save
#or
$ yarn add react-uis

How to use

  • Upload
code
// ES6
import { Upload } from 'react-uis'

<Upload
    action='/xxx/xxx'
    limit={8}
    maxSize={1024 * 1024 * 10}
    accept="image/png, image/jpg, image/jpeg"
    beforeUpload={async (file) => {
       
    }}
    onSuccess={async (file = {}, res) => {
        
    }}
    onRemove={(index) => {
        
    }}
    onError={(file = {}, res) => {
        
    }}
/>

Prop Types
property propType required default description
value - {null}
defaultValue - {null}
sign - "upload"
action - ""
accept - "image/png, image/jpg, image/jpeg, image/gif, image/bmp"
name - "file"
headers - {null}
withCredentials - {true}
disabled - {false}
limit - {8}
maxSize - {10485760}
hasThumbnail - {true}
hasDelete - {true}
dropZoneProps - {{}}
cropGetBase64Type - "load"
cropDisabled - {false}
cropMinWidth - {500}
cropMinHeight - {500}
cropList - {[]}
cropProps - {{}}
sortDisabled - {false}
sortableContainerProps - {{}}
sortableElementProps - {{}}
locale - {{title: "upload", width: "width",height: "height",saveClose: "save and close",addPicture: "Add Picture",thumbnail: "Thumbnail",uploadError: "Upload Error",cropError: "Image clipping failed",duplicate: "Duplicate Pictures",uploadTips: ["Drag and drop pictures below to upload. Maximum 8 pictures, size between 500500 and 20002000 px."],}}
formatter - {null}
beforeUpload - {null}
onSuccess - {null}
onError - {null}
onRemove - {null}
onChange - {null}
onShowUploadError - {null}
onSortEnd - {null}
onCrop - {null}
onCropError - {null}
onCropGetBase64Data - {null}
onShowCrop - {null}
onUploadClick - {null}
  • Guide
code
// ES6
import { Guide } from 'react-uis'

<div style={{marginLeft: '100px'}}>
    <div className="step-guide-1" style={{margin: '10px'}}>step1</div>
    <div className="step-guide-3" style={{margin: '10px'}}>step3</div>
    <div className="step-guide-2" style={{margin: '10px', float: 'left'}}>step2</div>
    <div className="step-guide-5" style={{margin: '10px', float: 'left'}}>step5</div>
    <div className="step-guide-4" style={{margin: '10px', float: 'left'}}>step4</div>
    <div className="step-guide-7" style={{margin: '10px', float: 'left'}}>step7</div>
    <div className="step-guide-6" style={{marginTop: '1000px', marginBotton: '400px'}}>step6</div>
    <Guide 
        guideCloseCondition={2000}
        guideData={[
            {
                selector: '.step-guide-1',
                guideContent: '<div><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div><div>2</div><div>3</div></div>',
            },
            {
                selector: '.step-guide-2',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-3',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-4',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-5',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-6',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-7',
                guideContent: 'Content',
            }
        ]}/>
</div>

Prop Types
property propType required default description
guideCloseCondition - {1}
guideData - {[]}

Demo

Contributions

Yes please! Feature requests / pull requests are welcome.