# react-useunsplash

> > React hook to get a unsplash image and its metadata with ease.

Latest version **0.0.1-3** (published 2020-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-useunsplash
pnpm add react-useunsplash
yarn add react-useunsplash
bun add react-useunsplash
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-3 |
| Published | 2020-10-22 |
| First published | 2020-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Christian |
| Maintainers | zeekrey |

## Links

- npm: https://www.npmjs.com/package/react-useunsplash
- Repository: https://github.com/zeekrey/react-useUnsplash
- npm.io page: https://npm.io/package/react-useunsplash

## Recent versions

- 0.0.1-3 (latest) — 2020-10-22
- 0.0.1-5 (beta) — 2020-10-24
- 0.0.1-4 — 2020-10-23

## README

# useUnsplash - React hook

> React hook to get a unsplash image and its metadata with ease.

## Usage

```bash
yarn add @zeekrey/useunsplash
```

```
npm install @zeekrey/useunsplash
```

Basic usage:

```javascript
const [image, imageMeta] = useUnsplash({
                apikey: '21jkwopdio29khp192',
                id: 'VMPhyAoVqqk',
                options: { w: 600, ar: '2:1', fit: 'crop' },
            }),
```

## Details

This is the object thats needs to be provided when using the hook:

-   **apikey**: Your Unplash API key. If you don't have one, you can get it here: [unsplash.com/developers](https://unsplash.com/developers)
-   **id**: This is the image id. The is this: _unsplash.com/photos/<id>_. For example https://unsplash.com/photos/jK2LuKGd_vI => id = jK2LuKGd_vI
-   **options**: Finde the most updated version here: [unsplash.com/documentation](https://unsplash.com/documentation#supported-parameters)

The hook returns an array with the following two parameters:

-   image: The actual image endpoint. We use the 'raw' version of the image like described here: [unsplash.com/documentation](https://unsplash.com/documentation#example-image-use)
-   imageMeta: An object that is described here: [unsplash.com/documentation](https://unsplash.com/documentation#response-9https://unsplash.com/documentation#response-9)

```typescript
interface Props {
    apikey: string
    id: string
    options?: {
        w?: number
        h?: number
        ar?: string
        crop?: string
        fm?: string
        q?: number
        fit?: string
        dpr?: number
    }
}

function useUnsplash(
    { apikey, id, options = {} }: Props = { apikey: '', id: '' },
): [string | undefined, UnsplashObject | undefined] {
    //...
}
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

### Development

Run tests with

```
yarn test
```

To run tests you need to create env file like this:

```
cd <project-root> && echo process.env.APIKEY = 'your_api_key' > .env.js
```

## License

[MIT](https://choosealicense.com/licenses/mit/)

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