react-uis
v1.4.2
Published
react component library
Downloads
30
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.