react-unsplash-wrapper

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>