canner-image-gallery
A image gallery for CannerIO
Installation
$ npm install --save canner-image-gallery
Usage
IMPORTANT NOTE: You need to import react-flexbox-grid's css in order to let it work correctly
Or add
into your HTML.
; Component { return <Gallery value= 'https://images.unsplash.com/photo-1494005612480-90f50fd9376f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=36d7fc577cf6a4527cbee851db481b8c&auto=format&fit=crop&w=3153&q=80' 'https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=add00823c6d712c149aa86c82f02c21e&auto=format&fit=crop&w=3151&q=80' 'https://images.unsplash.com/photo-1506241537529-eefea1fbe44d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7c743141b38a2afe4a8ec4d77c889ef3&auto=format&fit=crop&w=3150&q=80' renderContent= <div>content i</div> contentTitle="Content title" onDelete= console onCreate= console onSwap= console serviceConfig= mashapeKey: '<mashapeKey>' clientId: '<clientId>' /> ; }
Props
Name | Type | Default | Description |
---|---|---|---|
value | Array<string> |
undefined | Array of your photo's url |
disableDrag | boolean |
false | Whether gallery is draggable |
renderContent | (index: number) => React.Element<*> |
undefined | If this is defined, a edit button will rendered in each photo |
contentTitle | string? |
undefined | The popup content's title |
onDelete | (index: number) => void |
undefined | Called when the photo is deleted |
onCreate | ({index: number, image: string} or Array<{index: number, image: string}>) => void |
undefined | Called when the photo is created |
onSwap | ({fromIndex: number, toIndex: number}) => void |
undefined | Called when the photo is swapped |
serviceConfig | depends on services | undefined | pass image configurations generate from: https://github.com/Canner/image-service-config |
Start example server
npm start
generate demo
npm run gh-pages
License
MIT © Canner