open-index/open-npm huggingface dataset:
npm package: @jbleach/react-video-recorder
Description: ## Installation
Latest version: 0.0.3

# react-video-recorder

## Installation

```sh
yarn add react-video-recorder

# Note: this project has react, react-dom, prop-types & styled-components as peerDependencies,
#       so if you're starting from scratch run this instead:
yarn add react-video-recorder react react-dom prop-types styled-components
```

## Usage

Basic usage [(edit in stakblitz)](https://stackblitz.com/edit/react-video-recorder-demo):

```js
import React from 'react'
import { render } from 'react-dom'
import VideoRecorder from 'react-video-recorder'

const App = () => (
  <VideoRecorder
    onRecordingComplete={videoBlob => {
      // Do something with the video...
      console.log('videoBlob', videoBlob)
    }}
  />
)

render(<App />, document.getElementById('root'))
```

Also check the [Storybook](https://react-video-recorder.vercel.app/) for more demos and usage examples.

**Note:** if you click the **"Show info"** button in the top-right corner, you should be able to see a table with the supported prop-types.

### Modifying the UI

All the UI can be customized by passing the following props:

#### `renderDisconnectedView`

View that's rendered before the user enables the camera access.

**Default value:** `() => <DisconnectedView />`

[See `<DisconnectedView />` source here.](src/defaults/disconnected-view.js)

#### `renderLoadingView`

View that's rendered while the camera is initializing.

`() => <LoadingView />`

[See `<LoadingView />` source here.](src/defaults/loading-view.js)

#### `renderVideoInputView`

View that's rendered when the browser does not support inline recording but allows opening the native camera (mainly iOS).

**Default value:** `({ videoInput }) => <Fragment>{videoInput}</Fragment/>`

#### `renderUnsupportedView`

View that's rendered when the browser does not support recording video.

**Default value:** `() => <UnsupportedView />`

[See `<UnsupportedView />` source here.](src/defaults/unsupported-view.js)

#### `renderErrorView`

View that's rendered an unexpected error occurs.

**Default value:** `() => <ErrorView />`

[See `<ErrorView />` source here.](src/defaults/error-view.js)

#### `renderActions`

Overlay that's rendered on top of the views and that contains the elements like the buttons, the timer or the countdown.

[See the default implementation here.](src/defaults/render-actions.js)

## Development

Requirements

`node version ">=8.3"`

Install packages

```sh
yarn install
```

Run the storybook demo

```sh
yarn start
```
npm package: @jbloggz/mock-fetch
Description: A mock for the global fetch function that can be used for testing API calls
Author: Josef Barnes
Latest version: 1.0.1

The package provides a mock for the global fetch function that can be used for testing API calls.

# Installation

Install with npm

```bash
npm i @jbloggz/mock-fetch
```

Install with yarn

```bash
yarn add @jbloggz/mock-fetch
```
npm package: @jbloggz/use-api
Description: A react hook that wraps react-query and handles JWT authentication
Author: Josef Barnes
Latest version: 1.0.1

A React hook for talking to an API that uses TanStack Query and fetch under the hood. It handles JWT authentication and automatically refreshes tokens.

# Installation

Install with npm

```bash
npm i @jbloggz/use-api
```

Install with yarn

```bash
yarn add @jbloggz/use-api
```
npm package: @jbloom/steady-stripe
Description: React Native Stripe binding for iOS/Andriod platforms
Author: Tipsi
Latest version: 0.0.4

# tipsi-stripe

[![npm version](https://img.shields.io/npm/v/tipsi-stripe.svg?style=flat-square)](https://www.npmjs.com/package/tipsi-stripe)
[![build status](https://img.shields.io/travis/tipsi/tipsi-stripe/master.svg?style=flat-square)](https://travis-ci.org/tipsi/tipsi-stripe)

React Native Stripe binding for iOS/Android platforms

## Changelog

[Full changelog](/CHANGELOG.md)

[[7.0.0] - 2019-01-08 **Breaking changes**](/CHANGELOG.md#700---2019-01-08)

[[6.0.0] - 2018-10-24 **Breaking changes**](/CHANGELOG.md#600---2018-10-24)

[[5.0.0] - 2018-03-21 **Breaking changes**](/CHANGELOG.md#500---2018-03-21)

## Documentation

https://tipsi.github.io/tipsi-stripe/

```sh
# help us to upgrade docs locally
npm run start-docs

# upgrade existing docs website in repo
npm run build-docs
```

## License

tipsi-stripe is available under the MIT license. See the [LICENSE](https://github.com/tipsi/tipsi-stripe/tree/master/LICENSE) file for more info.
npm package: @jbmasterlerna/cf-vue-draggable-test
Description: Vue component allowing drag-and-drop sorting in sync with View-Model
Author: jiebaomaster@gmail.com
Latest version: 0.4.3

# cf-vue-draggable

Vue component allowing drag-and-drop sorting in sync with View-Model

## Excemple

```html
<!--base-->
<draggable :list='list' :element='"ul"'>
  <li v-for='item in list'>
    <span>{{ item }}</span>
  </li>
</draggable>

<!--with transition-group-->
<draggable :list='list' :element='"ul"'>
  <transition-group name='flip-list'>
    <li v-for='item in list' :key='item'>
      <span>{{item}}</span>
    </li>
  </transition-group>
</draggable>
```

## Feature

version 0.2.0

- support transition-group component

version 0.1.0

- provide a vuejs component for draggable sort.
- support custom parent element, such as: ul, tbody
- emit event when start drag and stop drag

### todo

1. transition
2. draggable-icon component. Become draggable when mouse hover

## Test

need `browser-sync`

on shell `npm run test`, will open a develop server on `localhost:3000`

_please forgive my poor english_