React Gluejar

Collects the images you paste from your clipboard.

Installation

yarn add @charliewilco/gluejar

Example

import React, { Component } from 'react'
import { Gluejar } from '@charliewilco/gluejar'

class App extends Component {
  render() {
    return (
      <Gluejar onPaste={files => console.log(files)} onError={err => console.error(err)}>
        {({ images }) =>
          images.length > 0 &&
          images.map(image => <img src={image} key={image} alt={`Pasted: ${image}`} />)
        }
      </Gluejar>
    )
  }
}

Run this example locally by cloning the repo and running yarn example in the root directory. You can visit the example here.

Usage

Available Props

| Prop | Type | Description | Default | | --------------- | --------------- | ------------------------------------------------ | ------------------------------------------------------- | | onPaste | Function | returns Array of image Blobs, responds to events | () => null | | onError | Function | returns error messages | () => null | | children | Function | returns Array of history of pasted images | N/A | | acceptedFiles | Array<String> | Array of accepted files to check for | ['image/gif', 'image/png', 'image/jpeg', 'image/bmp'] | | container | Element | Element object to listen on | window |

Browser Support

| Browser | Support | | ------- | ------- | | Chrome | 👍 | | IE | 👎 | | Firefox | 🙄 | | Edge | 👍 | | Safari | 👍 | | Opera | 👍 |

🙄 = Look there's something going on in Firefox for a while. You can read the tracking issue here, but I don't insight into their timeline or priority.