Skip to content

A tiny React component to effortless use placeholder images from Unsplash

License

Notifications You must be signed in to change notification settings

marciobarrios/react-unsplash-wrapper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-unsplash-wrapper

npm version License: MIT

A tiny React component to effortless use images from Unsplash with tons of possibilities.

You can play with react-unsplash-wrapper in a CodeSandbox.

Why?

Because I love Unsplash pics and I wanted to use them in my React prototypes with no effort. For avatars, placeholders or Hero images.

Installation

yarn add react-unsplash-wrapper

Or, if you use npm, npm i --save react-unsplash-wrapper

Usage

You only need to import <Unsplash /> and use it with tons of possibilities:

import Unsplash from 'react-unsplash-wrapper'

const Avatar = () => (
  <Unsplash width="64" height="64" keywords="kitten" img />
)

const ImgPlaceholder = () => (
  <Unsplash width="800" height="200">
    Foo bar
  </Unsplash>
)

The easiest way to play with react-unsplash-wrapper is with a live example in CodeSandbox, I prepared one for you with lots of examples: https://codesandbox.io/s/5wx6j02034

<Unsplash /> gives you some convenient defaults:

  • 1080 x 720 placeholder by default with a random image
  • Image as CSS background
  • Image covering the container
  • Centered content by default (useful for Hero images)
  • Minimum height of 400px
  • The placeholder expands horizontally

Props

Name Type Default Description
children node - Used only when img is false. Anything that can be rendered: numbers, strings, elements or an array
collectionId number - Random image from a specific collection
photoId number - photo image id to show
username string - Random image from a specific user
keywords string - Keywords to find a random image, separated by comma
expand boolean false To expand the image to a parent container (needs position: relative)
fixed boolean false To show the daily picture from Unsplash
img boolean false Shows an image instead of a container with CSS background
width string or number 1080 Width of the placeholder or image
height string or number 720 Height of the placeholder or image
style object - Extra styles to add to the placeholder or image

Tons of possibilities

Simplest placeholder (shown as a random CSS background, with a size of 1080 x 720, the container expands horizontally and with a min height of 400px)

<Unsplash />

Simplest image (shown a random <img /> with a size of 1080 x 720)

<Unsplash img />

Avatars (with <img /> or as a placeholder)

<Unsplash width="64" height="64" keywords="face" img />

Placeholder with image, size and random image

<Unsplash width="800" height="200" />

Placeholder with custom size and keywords

<Unsplash width="800" height="200" keywords="beach, palms, sea" />

Placeholder with content inside (Hero block) and custom styles

<Unsplash height="400" style={{ lineHeight: 2 }}>
  <h1 style={{color: 'white', textShadow: '1px 1px 2px black'}}>Super awesome title</h1>
  <p style={{color: 'white', textShadow: '1px 1px 2px black'}}>With React Unsplash Wrapper is really easy to create a Hero image.</p>
</Unsplash>

Placeholder that expands to its parent (that needs to be relative positioned)

<div style={{position: 'relative', width: 400, height: 400, margin: 'auto'}}>
  <Unsplash expand />
</div>

Releases

No releases published

Packages

No packages published