React-unsplash NPM

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