0.1.26 • Published 11 months ago

react-unsplash v0.1.26

Weekly downloads
-
License
-
Repository
github
Last release
11 months ago

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

NameValueDefaultRequiredDescription
displayModenormal | popupnormalnoWhile "popup" this component will be displayed in a pop-up modal
initValuestring''noInit value that will invoke onSearch|onCommit callbacks
onSearch(value: string) => void | undefinedundefinednoCallback function when input search changes
onCommit((value: string) => void) | undefinedundefinednoCallback function when hitting enter
onSelect(image: any) => voidyesCallback function when a photo is clicked
imagesany[][]yesShould be Unsplash images object
loadingboolean |undefinedundefinednoAn indicator of loading state, when searching for photos
handleLoadMore(() => void) | undefinedundefinednoCallback function when the last image is scrolled into view
hasMoreboolean | undefinedundefinednoIf true, handleLoadMore will be fired when the last image is scrolled into view
openboolean | undefinedundefinedyes (only when displayMode is "popup")When true, the popup is shown
onClose(() => void) | undefinedundefinedyes (only when displayMode is "popup")Callback function when the popup is requested to close
widthnumber | undefinedundefinednoSpecify the width of the component
heightnumber | undefinedundefinednoSpecify the height of the component
colsnumber | undefinedautonoSpecify the number of images columns in the gallery
gapnumber | undefined8(px)noSpecify 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