@charliewilco/gluejar NPM

React Gluejar

Collects the images you paste from your clipboard.

Demo using `react-gluejar`

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.

@infinitebrahmanuniverse/nolb-_char @everything-registry/sub-chunk-166 @zalastax/nolb-_char @unionfab/ufc-components @unionfab/ufc-componets @unionfab/ufc-vis-components ufc-components

1.0.0

5 years ago