https://github.com/charliewilco/react-gluejar

Paste images from your clipboard, declaratively
https://github.com/charliewilco/react-gluejar

copy hooks paste react renderprops

Last synced: 17 days ago
JSON representation

Paste images from your clipboard, declaratively

• Host: GitHub
• URL: https://github.com/charliewilco/react-gluejar
• Owner: charliewilco
• License: mit
• Created: 2018-05-17T23:52:19.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2022-09-29T09:05:11.000Z (about 2 years ago)
• Last Synced: 2024-10-11T18:51:16.426Z (about 1 month ago)
• Topics: copy, hooks, paste, react, renderprops
• Language: TypeScript
• Homepage: https://gluejar.vercel.app/
• Size: 8.58 MB
• Stars: 62
• Watchers: 3
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Gluejar

> Collects the images you paste from your clipboard.

![Demo using `react-gluejar`](/.github/gluejar.gif)

## Installation

```sh

yarn add @charliewilco/gluejar

```

## Example

```js

import React, { Component } from 'react'

import { Gluejar } from '@charliewilco/gluejar'

class App extends Component {

  render() {

    return (

       console.log(files)} onError={err => console.error(err)}>

        {({ images }) =>

          images.length > 0 &&

          images.map(image => )

        }

      

    )

  }

}

```

Run this example locally by [cloning the repo](https://help.github.com/articles/cloning-a-repository/) and running `yarn example` in the root directory. You can visit the example [here](https://react-gluejar.now.sh/).

## 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` | 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](https://bugzilla.mozilla.org/show_bug.cgi?id=906420), but I don't insight into their timeline or priority.