open-index/open-npm huggingface dataset:
npm package: @houshuang/react-tweet
Description: React.js component for rendering tweets as they are presented on Twitter.com
Author: Manny404
Latest version: 1.7.2

<p align="center">
  <img src="https://raw.githubusercontent.com/artnotfound/react-tweet/master/tweet.png" />
</p>

[live demo](https://react-tweet.herokuapp.com/)

React.js component for rendering tweets as they are presented on Twitter.com. Currently themed after the Desktop
experience with the idea of a fixed width timeline. See the [example app](https://github.com/mannynotfound/react-tweet/blob/master/example/app.js) for
an example of a tweet stream.

## Motivation

`react-tweet` should make it easier to boostrap Twitter based React.js apps. This way we can focus
on interesting ways to use and manipulate the API without the pains of rendering. Styles, assets, and HTML have
been lifted from [twitter.com](https://twitter.com) and [twitter dev docs](https://dev.twitter.com/overview/documentation).
`react-tweet` uses only inline styles and while written in ES6, compiles to plain JS meant to be absorbed by any React project.
`react-tweet` can be used a 'dumb' component for simply rendering data or could be a starting point for a more ambitious Tweet component.

## Dependencies

To get full video functionality, include videojs in your app. You can use the `http://vjs.zencdn.net/5-unsafe/video.js` as a CDN path.
If you dont include videojs it should fall back to native HTML5 video.

## Usage

Pass in tweet objects returned from twitter API Requests as a 'data' prop. Designed for use with
[search](https://dev.twitter.com/rest/reference/get/search/tweets) & [home_timeline](https://dev.twitter.com/rest/reference/get/statuses/home_timeline) methods,
although any object can be used as long as it has the following properties:


```js
import React from 'react'
import Tweet from 'react-tweet'

const tweetData = {
  id_str: 'XXX',
  user: {
    name: 'XXX',
    screen_name: 'XXX',
    profile_image_url: 'XXX'
  },
  text: 'XXX',
  created_at: 'XXX',
  favorite_count: 'XXX',
  retweet_count: 'XXX',
  entities: {
    media: [],
    urls: [],
    user_mentions: [],
    hashtags: [],
    symbols: []
  } 
}

class MyTweetComponent extends React.Component {
  render () {
    // use linkProps if you want to pass attributes to all links
    const linkProps = {target: '_blank', rel: 'noreferrer'}

    return (
      <Tweet data={tweetData} linkProps={linkProps} />
    )
  }
}
```

## Demo
  * live: [live demo](https://react-tweet.herokuapp.com/)
  * local: run `npm start` & visit `localhost:8080`

## Supported
  * Desktop Twitter.com styles
  * Retweets
  * Quote tweets
  * Auto-linking via [twitter-text](https://www.npmjs.com/package/twitter-text)
  * Twitter Emoji support via [twemoji](https://github.com/twitter/twemoji)
  * Modal mode for images
  * Isomorphic Rendering

## TODO:
  * Mobile style support
  * ~~Better video support, seems Twitter uses custom player~~
  * ~~Mimick video controls of Twitter.com~~
  * Add slideshow controls in Modal mode
  * Refactor how images get cropped, kind of a mess rn
  * Support for Tweet threads
  * Tests
npm package: @houshuang/react-webcam
Description: React webcam component
Author: Moz Morris
Latest version: 0.5.0

# react-webcam

Webcam component for React. See [this](http://caniuse.com/#feat=stream)
for browser compatibility.

## Installation

```
npm install react-webcam
```

## Demo

https://codepen.io/mozmorris/pen/JLZdoP

## Usage

```javascript
import React from 'react';
import Webcam from 'react-webcam';

class Component extends React.Component {
  render() {
    return <Webcam/>;
  }
}
```

### Props

prop             | type     | default      | notes
-----------------|----------|--------------|----------
className        | string   | ''           | CSS class of video element
audio            | boolean  | true         | enable/disable audio
height           | number   | 480          | height of video element
width            | number   | 640          | width of video element
style            | object   |              | style prop passed to video element
screenshotFormat | string   | 'image/webp' | format of screenshot
onUserMedia      | function | noop         | callback when component receives a media stream
onUserMediaError | function | noop         | callback when component cannot receives any media stream width error param
audioSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id
videoSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id

### Methods

`getScreenshot` - Returns a base64 encoded string of the current webcam image. Example:

```javascript
class WebcamCapture extends React.Component {
  setRef = (webcam) => {
    this.webcam = webcam;
  }

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();
  };

  render() {
    return (
      <div>
        <Webcam
          audio={false}
          height={350}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={350}
        />
        <button onClick={this.capture}>Capture photo</button>
      </div>
    );
  }
}
```

## License

MIT

## Credits

Many thanks to @cezary for his work on this component.
npm package: @houshuang/resize-img
Description: Resize images in memory
Author: Kevin Martensson
Latest version: 1.2.3

# resize-img [![Build Status](https://travis-ci.org/kevva/resize-img.svg?branch=master)](https://travis-ci.org/kevva/resize-img)

> Resize images in memory


## Install

```
$ npm install --save resize-img
```


## Usage

```js
const fs = require('fs');
const resizeImg = require('resize-img');

resizeImg(fs.readFileSync('unicorn.png'), {width: 128, height: 128}).then(buf => {
	fs.writeFileSync('unicorn-128x128.png', buf);
});
```


## API

### resizeImg(input, options)

#### input

Type: `buffer`

An image buffer. Supported formats are `bmp`, `jpg` and `png`.

#### options

##### width

Type: `number`

Desired width of the target image.

##### height

Type: `number`

Desired height of the target image.


## Related

* [resize-img-cli](https://github.com/kevva/resize-img-cli) - CLI for this module.


## License

MIT © [Kevin Martensson](http://github.com/kevva)
npm package: @housinganywhere/match
Description: Poor man's pattern matching
Author: Christian Gill
Latest version: 1.1.1

# poor man's pattern matching :traffic_light:

[![npm version](https://badge.fury.io/js/%40housinganywhere%2Fmatch.svg)](https://badge.fury.io/js/%40housinganywhere%2Fmatch)
[![CircleCI](https://circleci.com/gh/housinganywhere/match.svg?style=svg)](https://circleci.com/gh/housinganywhere/match)

## Install

```
yarn add @housinganywhere/match

npm i @housinganywhere/match
```

## Use

[![Edit @housinganywhere/match](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y3qk65jpyj)

```ts
import * as React from 'react';
import match from '@housinganywhere/match';

type Status = 'loading' | 'error' | 'success';

enum Status {
  loading = 'loading',
  error = 'error',
  success = 'success',
}

const StatusMsg: React.SFC<{ status: Status }> = ({ status }) =>
  match<Status, React.ReactNode>({
    loading: () => <Spinner />,
    error: () => <Alert type="danger">There was an error</Alert>,
    success: () => <Alert type="success">Yay! It worked</Alert>,
  })(status);
```

For matching several cases together use **wildMatch**. All the missing cases
will be handled by case `_`.

```ts
import { wildMatch } from '@housinganywhere/match';

type Vowels = 'a' | 'e' | 'i' | 'o' | 'u';

const isA = wildMatch<Vowels, string>({
  a: () => 'Yay!',
  _: (v) => `Nope, "${v}" is not "a"`,
});

isA('a'); // 'Yay!'
isA('e'); // 'Nope, "e" is not "a"'
isA('i'); // 'Nope, "i" is not "a"'
isA('o'); // 'Nope, "o" is not "a"'
isA('u'); // 'Nope, "u" is not "a"'
```

## License

[MIT](https://github.com/housinganywhere/match/blob/master/LICENSE) © 2019
[HousingAnywhere](https://housinganywhere.com/)