react-unsplash-container v1.1.0

react-unsplash-container

A simple React container with background images taken from Unsplash.com

Install

$ yarn add react-unsplash-container

Usage

Simply import Unsplashed from react-unsplash-container and use it like a div

import React, { Component } from 'react';
import { Unsplashed } from 'react-unsplash-container'
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <Unsplashed className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </Unsplashed>
    );
  }
}

export default App;

Options

An Unsplashed container can be customized using the following properties

Source

Specify a source for the background image:

• from an Unsplash user

<Unsplashed 
  src={{ username: 'username' }}
></Unsplashed>

• from an Unsplash user likes

<Unsplashed 
  src={{ username: 'username', likes: true }}
></Unsplashed>

• from an Unsplash collection

<Unsplashed 
  src={{ collectionId: '12345' }}
></Unsplashed>

Size

Specify a custom size for the background source image

<Unsplashed 
  size={{ width: 1600, height: 900 }}
></Unsplashed>

Fixed

Specify if the image should be the same for a period of time

See Unsplash Source docs for more info.

• Daily image

<Unsplashed 
  fixed="daily"
></Unsplashed>

• Weekly image

<Unsplashed 
  fixed="weekly"
></Unsplashed>

Keywords

Specify the keywords used to pick a background image

<Unsplashed
  keywords={['nature', 'water']}
></Unsplashed>