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 ="64" ="64" ="kitten" /> const ImgPlaceholder = <Unsplash ="800" ="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 />
Avatars (with <img />
or as a placeholder)
<Unsplash ="64" ="64" ="face" />
Placeholder with image, size and random image
<Unsplash ="800" ="200" />
Placeholder with custom size and keywords
<Unsplash ="800" ="200" ="beach, palms, sea" />
Placeholder with content inside (Hero block) and custom styles
<Unsplash ="400" => <h1 =>Super awesome title</h1> <p =>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 => <Unsplash /></div>