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 <Upload action='/xxx/xxx' limit=8 maxSize=1024 * 1024 * 10 accept="image/png, image/jpg, image/jpeg" beforeUpload=async { } onSuccess=async { } onRemove= { } onError= { }/>
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 <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.