# react-unsplash-wrapper

> A tiny React component to effortless use placeholder images from Unsplash

Latest version **1.1.5** (published 2019-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-unsplash-wrapper
pnpm add react-unsplash-wrapper
yarn add react-unsplash-wrapper
bun add react-unsplash-wrapper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2019-12-09 |
| First published | 2018-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Marcio Barrios |
| Maintainers | marciobarrios |
| Keywords | react, unsplash, placeholder, images, pictures, photos |

## Links

- npm: https://www.npmjs.com/package/react-unsplash-wrapper
- Repository: https://github.com/marciobarrios/react-unsplash-wrapper
- Homepage: https://github.com/marciobarrios/react-unsplash-wrapper#readme
- Issues: https://github.com/marciobarrios/react-unsplash-wrapper/issues
- npm.io page: https://npm.io/package/react-unsplash-wrapper

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2019-12-09
- 1.1.3 — 2019-01-24
- 1.1.2 — 2019-01-24
- 1.0.2 — 2018-05-14
- 1.0.1 — 2018-02-28
- 1.0.0 — 2018-02-21

## README

# react-unsplash-wrapper

[![npm version](https://img.shields.io/npm/v/react-unsplash-wrapper.svg)](https://www.npmjs.com/package/react-unsplash-wrapper)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

A tiny React component to effortless use images from [Unsplash](https://unsplash.com/) with tons of possibilities.

You can play with `react-unsplash-wrapper` in a [CodeSandbox](https://codesandbox.io/s/5wx6j02034).

## 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:
```jsx
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](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)
```jsx
<Unsplash />
```

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

Avatars (with `<img />` or as a placeholder)
```jsx
<Unsplash width="64" height="64" keywords="face" img />
```

Placeholder with image, size and random image
```jsx
<Unsplash width="800" height="200" />
```

Placeholder with custom size and keywords
```jsx
<Unsplash width="800" height="200" keywords="beach, palms, sea" />
```

Placeholder with content inside (Hero block) and custom styles
```jsx
<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)
```jsx
<div style={{position: 'relative', width: 400, height: 400, margin: 'auto'}}>
  <Unsplash expand />
</div>
```

---
_Source: https://npm.io/package/react-unsplash-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._