open-index/open-npm huggingface dataset:
npm package: @ryanafrish7/ar-picker
Description: A minimalist picker
Author: Afrish Khan S
Latest version: 0.0.1-alpha.2

# ar-picker

A [Cupertino (iOS-style) Picker](https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/) inspired component for the web, built on **lit-html**.

## Get started

1) Install the component using npm

    ```npm install @ryanafrish7/ar-picker```

2) Import it into your module script

    ```import "@ryanafrish7/ar-picker";```

    Or into your HTML webpage

    ```<script type="module" src="node_modules/@ryanafrish7/ar-picker/ar-picker.js"></script>```

    This adds `ar-picker` to the Custom Elements registry

3) Use the component in your webpage

    ```html
        <ar-picker id="zodiac"></ar-picker>
        <script>
            const zodiacPicker = document.querySelector("#zodiac");

            zodiacPicker.items = [
                "Capricorn", "Aquarius", "Pisces", "Aries", "Taurus", "Gemini", "Cancer", "Leo", 
                "Virgo", "Libra", "Scorpio", "Ophiuchus", "Sagittarius"
            ];

            zodiacPicker.addEventListener("select", event => {
                console.log(event.detail.selected);
            });
        </script>
    ```

4) Serve your webpage using `polymer serve`. This component uses npm convention to resolve dependencies by name. The polymer-cli handles this transformation automatically.
npm package: @ryanaltair/socket.io-stream
Description: Upload file as stream with socket.io, fork from @Akumzy/socket.io-stream
Author: ryanaltair
Latest version: 0.2.2

# socket.io-stream

socket.io based file stream

This package has three components

### Client:

  Only works in Nodejs environment like in ElectronJs.

### Web:

  Web is for browsers based app the component uses FileReader api to read file blob.

### Server:
  This component handlers all the request from both `Web` and `Client`

```js
//Client
import { Client } from '@ryanaltair/socket.io-stream'

const client = new Client(socket, {
  filepath: '/path/to/file/music.mp3',
  data: {
    //you pass your own data here
    name: 'music.mp3'
  }
})

client
  .upload('file-upload', data => {
    console.log({ data })
  })
  .on('progress', c => {
    console.log(c) //{total,size}
  })
  .on('done', data => {
    console.log(data)
  })
  .on('pause', () => {
    console.log('pause')
  })
  .on('cancel', () => {
    console.log('canceled')
  })
```

```js
//Web

function onChange(inputElement) {
  let file = inputElement.files[0]

  const client = new Web(socket, {
    file: file,
    data: {
      name: file.name
    }
  })
  client
    .upload('file-upload', data => {
      console.log({ data })
    })
    .on('progress', c => {
      console.log(c) //{total,size}
    })
    .on('done', data => {
      console.log(data)
    })
    .on('pause', () => {
      console.log('pause')
    })
    .on('cancel', () => {
      console.log('canceled')
    })
}
```

```js
//Server
import { Server } from '@ryanaltair/socket.io-stream'
import { appendFileSync } from 'fs'
const io = require('socket.io')(8090)

io.on('connection', socket => {
  const server = new Server(socket)

  server.on('file-upload', async ({ stream, data, ready }, ack) => {
    try {
      await someTask()
      ready()
      stream.subscribe({
        next({ buffer, flag }) {
          appendFileSync(data.name, buffer, {
            encoding: 'binary',
            flag
          })
        },
        complete() {
          ack(null, [1, 2, 3])
        },
        error(err) {
          ack(err)
          console.error(err)
        }
      })
    } catch (err) {
      console.error(err)
    }
  })
})
```
npm package: @ryanar/react-auth-provider
Description: > Easy to integrate react authentication management through context.
Author: Ryan Castner
Latest version: 0.3.3

# React Auth Provider

> Easy to integrate react authentication management through context.

[![codecov](https://codecov.io/gh/audiolion/react-auth-provider/branch/master/graph/badge.svg)](https://codecov.io/gh/audiolion/react-auth-provider) [![CircleCI](https://circleci.com/gh/audiolion/react-auth-provider/tree/master.svg?style=svg)](https://circleci.com/gh/audiolion/react-auth-provider/tree/master)

## Features

- Dead simple to integrate
- Properly memoized authenticated attribute that can be consumed by your app
- Hooks into `onLogin` and `onLogout`

## Install

```shell
$ yarn add @ryanar/react-auth-provider
```

## Usage

Add `AuthProvider` somewhere towards the top of your tree. You likely want to do some routing on login or logout so it should be below your routing context (e.g. react router's `Router` component).

```tsx
// App.tsx
import React from 'react';
import { useHistory } from 'react-router-dom';
import { AuthProvider } from '@ryanar/react-auth-provider';

function App() {
  const history = useHistory();

  const handleLogin = () => {
    history.push('/');
  };

  const handleLogout = () => {
    history.push('/login');
  };

  return (
    <AuthProvider onLogin={handleLogin} onLogout={handleLogout}>
      <Route path="/login" exact component={Login} />
      <AuthRoute path="/" exact component={Dashboard} />
    </AuthProvider>
  );
}
```

Integrate `setAuthenticated` into your login and logout flow, here is an example of a login flow:

```tsx
// Login.tsx
import React from 'react';
import { AuthContext } from '@ryanar/react-auth-provider';

function Login(props: RouteComponentProps) {
  const { setAuthenticated } = React.useContext(AuthContext);
  return (
    <button type="button" onClick={() => setAuthenticated(true)}>
      Login
    </button>
  );
}
```

Optionally configure a route that checks for authenticated, here is an example using react router:

```tsx
// AuthRoute.tsx
import React from 'react';
import { AuthContext } from '@ryanar/react-auth-provider';

function AuthRoute(props: RouteComponentProps) {
  const { authenticated } = React.useContext(AuthContext);

  if (!authenticated) {
    return <Redirect to="/login" />;
  }

  const { component: Component, ...rest } = props;

  return <Component {...rest} />;
}
```