React-uis NPM | npm.io

react-uis

React.js ui component

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
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>