npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

unsplash-react

v0.3.0

Published

Upload images from unsplash into your app

Downloads

6,274

Readme

unsplash-react

React components to get unsplash images in your app!

Install

$ yarn add unsplash-react

Usage

Here's the most basic example:

import UnsplashReact, { Base64Uploader, withDefaultProps } from "unsplash-react"

const MY_ACCESS_KEY = "UNSPLASH_KEY_FROM_UNSPLASH"

export default function UnsplashUploader() {
  return (
    <UnsplashReact
      accessKey={MY_ACCESS_KEY}
      Uploader={withDefaultProps(Base64Uploader, { name: "event[logo]" })}
    />
  )
}

unsplash-react has two core steps

  1. Find a photo from unsplash
  2. Download the photo into the user's browser

Once the photo blob is in the browser, you can insert it into a page (using the URL), or upload the photo to your server for further use.

This is accomplished through the Uploader prop, which is a React component that is initialized with a standard set of props, and uses callbacks to signal its progress.

Please see the examples directory for more information, and don't hesitate to open an issue if you need help.

Try it out locally!

You'll need to create an application with Unsplash and get an access key to demo the components.

Once you have the access key, follow these steps.

$ git clone https://github.com/danielma/react-unsplash
$ cd react-unsplash
$ yarn
$ UNSPLASH_ACCESS_KEY=key yarn run dev
$ open http://localhost:10001/

<UnsplashReact /> Props

name | type | required | default | description --------------------- | -------------------------- | -------- | --------- | ----------- accessKey | string | yes | n/a | Access key from the Unsplash developer site applicationName | string | yes | n/a | Application name for UTM tracking columns | number | no | 3 | Number of columns to show in search results defaultSearch | string | no | "" | A default search string. If not set, react-unsplash will show popular photos from Unsplash highlightColor | string | no | #00adf0 | The highlight color for images when they have been selected and downloaded onFinishedUploading | func | no | no-op | A callback, for when the photo has finished uploading. Called with the download response from the uploader (eg, the response with the blob()) photoRatio | number | no | 3 / 2 | The width/height ratio for displaying search results preferredSize | shape({ width, height }) | no | n/a | Your application's preferred width and height for downloaded images. If not set, react-unsplash will download full size images Uploader | Component | no | Base64Uploader | The component used to upload photos from Unsplash to your application. AfterAttribution | Component | no | NullComponent | The component used to render additional attribution information into the image picker.

<Uploader /> Props

name | type | required | default | description --- | --- | --- | --- | ---- unsplashPhoto | Unsplash API object | yes | n/a | The photo object from the Unsplash API downloadPhoto | (UnsplashPhoto) => Promise<Response> | yes | n/a | Downloads the photo from Unsplash. If preferredSize is set, the returned Response is a request to download the preferred size. Otherwise, it is a request to download the full size image onFinishedUploading | func | yes | n/a | This function must be called when the Uploader has finished uploading the photo.

Built-in Uploaders

There are examples of the 3 main uploaders in the examples directory.

BlobUploader

The BlobUploader downloads the selected unsplash photo, and calls onBloblLoaded with a Promise<Blob> representing the downloaded image.

Base64Uploader

The Base64Uploader downloads the selected unsplash photo as a blob, encodes it as base64, and inserts a <input type="hidden" /> with the encoded value for you to upload to your server.

DataTransferUploader (experimental)

The DataTransferUploader uses experimental APIs only available (as of writing) in Chrome to download the photo as a blob and set it as the value of a <input type="file" /> for uploading to your server.

ExternalLocationUploader

The ExternalLocationUploader downloads the selected unsplash photo, and then executes a POST request to uploadUrl. It then calls this.props.onFinishedUploading with the Promise<Response> of that request.

The key example usage for this is direct to S3 upload. You can provide and uploadUrl, and after the photo is uploaded, you can save the bucket URL on your server.

InsertIntoApplicationUploader

The InsertIntoApplicationUploader calls onFinishedUploading with the URL of the photo to download. This can be used to insert the photo directly into your application.

Contributions welcome! :smile: