0.1.26 • Published 11 months ago
react-unsplash v0.1.26
This is an React Unsplash accelerator
React-Unsplash streamlines the process of integrating an Unsplash photo library into your projects, allowing you to focus on developing the features that matter most.
Installation
npm i react-unsplash
yarn add react-unsplash
pnpm add react-unsplash
How to use
import ReactUnsplash from 'react-unsplash'
[...]
<ReactUnsplash
initValue={search}
loading={isLoading}
onSearch={onSearch}
onCommit={onCommit}
onSelect={onSelect}
onClose={handleClose}
images={results}
handleLoadMore={handleNextPage}
hasMore={hasNext}
displayMode="normal"
cols={isMobile ? 2 : 3}
/>
[...]
Options
Name | Value | Default | Required | Description |
---|---|---|---|---|
displayMode | normal | popup | normal | no | While "popup" this component will be displayed in a pop-up modal |
initValue | string | '' | no | Init value that will invoke onSearch|onCommit callbacks |
onSearch | (value: string) => void | undefined | undefined | no | Callback function when input search changes |
onCommit | ((value: string) => void) | undefined | undefined | no | Callback function when hitting enter |
onSelect | (image: any) => void | yes | Callback function when a photo is clicked | |
images | any[] | [] | yes | Should be Unsplash images object |
loading | boolean |undefined | undefined | no | An indicator of loading state, when searching for photos |
handleLoadMore | (() => void) | undefined | undefined | no | Callback function when the last image is scrolled into view |
hasMore | boolean | undefined | undefined | no | If true, handleLoadMore will be fired when the last image is scrolled into view |
open | boolean | undefined | undefined | yes (only when displayMode is "popup") | When true, the popup is shown |
onClose | (() => void) | undefined | undefined | yes (only when displayMode is "popup") | Callback function when the popup is requested to close |
width | number | undefined | undefined | no | Specify the width of the component |
height | number | undefined | undefined | no | Specify the height of the component |
cols | number | undefined | auto | no | Specify the number of images columns in the gallery |
gap | number | undefined | 8(px) | no | Specify the gap between images |
0.1.26
11 months ago
0.1.25
1 year ago
0.1.24
1 year ago
0.1.23
1 year ago
0.1.22
1 year ago
0.1.21
1 year ago
0.1.20
1 year ago
0.1.19
1 year ago
0.1.18
1 year ago
0.1.17
1 year ago
0.1.16
1 year ago
0.1.15
1 year ago
0.1.14
1 year ago
0.1.13
1 year ago
0.1.12
1 year ago
0.1.11
1 year ago
0.1.10
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago