react-unsplash-wrapper v1.1.5
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-wrapperOr, 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>