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