open-index/open-npm huggingface dataset:
npm package: @rxsv/tools
Description: rxsv tools
Author: Grzegorz Bielski
Latest version: 2.0.0-alpha.3

# `tools`

A utility package for the `rxsv`.

```bash
npm install rxjs @rxsv/core @rxsv/tools
```

### `withDevTools`

Connect to the [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension)

Supported features:

-   listening to the `rxsv` actions and displaying the current state
-   time travel debugging

```typescript
import { createStore } from '@rxsv/core';
import { withDevTools } from '@rxsv/tools';

const store = createStore(a => a);
const enhancedStore = withDevTools(store);
```

You can connect multiple `rxsv` stores to the devtools. They can be distinguished by passing a custom name.

```typescript
const store = createStore(reducer, effect, 'ui-widget');
```
npm package: @rxtk/csv
Description: 🚰  RxJS operators for handling CSV data streams
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/csv
> 🚰  RxJS operators for handling CSV data streams

> ☠️ Warning: Be careful about upgrading the version of csv-parse used in this package. csv-parse does not use proper semantic versioning.  For example upgrading it from 4.15 to 4.16 introduces breaking changes that will cause code that previously parsed CSV properly to no longer do so. Any such updates may require a major version change to this package.

```bash
npm i @rxtk/csv
```

```bash
yarn add @rxtk/csv
```

## API

### `toCSV`

```js
import {from} from 'rxjs';
import {toCSV} from '@rxtk/csv';

const pirate$ = from([
  {name: 'Blackbeard', systolicBp: 140, diastolicBp: 91, message: 'Yarr'},
  {name: 'Crunch', systolicBp: 120, diastolicBp: 80, message: 'Arr'},
  {name: 'Blackbeard', systolicBp: 110, diastolicBp: 70, message: 'Savvy'},
]);

const csvRow$ = pirate$.pipe(toCSV(options));
csvRow$.subscribe(console.log);
// "name","systolicBp","dialostilicBp","message"
// "Blackbeard",140,91,"Yarr"
// "Crunch",120,180,"Arr"
// "Sparrow",110,70,"Savvy"
```

### `parseCSV`
Given a stream of CSV data, parse it into rows/data:
 ```js
 import { from } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { parseCSV } from '@rxtk/csv';

 // Create a stream of raw CSV data
 const csvString$ = from([
   '"name","systolicBp","dialostilicBp","message"\n', 
   '"Blackbeard",140,91,"Yarr"\n"Crunch",120,', 
   ',180,"Arr"\n"Sparrow",110,70,"Savvy"\n',
 ]);

 // Stream the CSV data into an RxJS Subject
 const row$ = csvString$.pipe(parseCSV());
 row$.subscribe(console.log);
 // {name: "Blackbeard", systolicBp: 140, diastolicBp: 91, message: 'Yarr'},
 // {name: "Crunch", systolicBp: 120, diastolicBp: 80, message: 'Arr'},
 // {name: "Sparrow", systolicBp: 110, diastolicBp: 70, message: 'Savvy'},
 ```
npm package: @rxtk/fs
Description: 💾 RxJS operators and utilities for working with files and file streams locally
Author: Brian Flaherty
Latest version: 0.0.0

# @rxtk/fs
> 💾 RxJS operators and utilities for working with files and file streams locally

## Installation
This is a private package. It requires setting up access in your npm config.

```bash
npm i @rxtk/fs
```

```bash
yarn add @rxtk/fs
```

## API

### `appendToFile`
Appends a stream of data to a file:
```javascript
import path from 'path';
import {of} from 'rxjs';
import {appendFile} from 'rxfs';

const data = [
  '"animal","coolness"',
  '"dolphin",10',
  '"algea",1',
  '"mermaid",6',
  '"octopus",9',
  '"octopus",9',
  '"narwhale",8',
];

const writeStream$ = of(...data).pipe(
  appendFile({filePath: path.resolve(__dirname, './output.csv')})
);
// write the input observable to the file
writeStream$.subscribe(console.log);
```

### `fromFile`
Streams data from a file as a stream of Buffers.
```js
import path from 'path';
import {fromFile} from '@rxtk/fs';

const csvContentAsBuffer$ = fromFile({
  filePath: path.resolve(__dirname, './my-csv.csv'),
});
csvContentBuffer$.subscribe(console.log);
// "name","scariness"
// "Blackbeard",10
// "Morgan",9
// "Sparrow",2
// "Crunch",1
```

### `shortenChunks`
Takes a stream of Buffer objects and ensures that they are shortened to the desired size, while preserving order/sequence.  Useful, for example, if you want to control the size of a file upload.
```js
import path from 'path';
import {fromFile,shortenChunks} from '@rxtk/fs';

const csvContentAsBuffer$ = fromFile({
  filePath: path.resolve(__dirname, './my-csv.csv'),
});
const chunkSize = 512;
const shortenedBuffer$ = fileChunk$.pipe(
  shortenChunks(chunkSize)
);
shortenedBuffer$.subscribe(console.log);
```

### `writeToFile`
Writes data to file (overwriting any previous contents).
```js
import path from 'path';
import {of} from 'rxjs';
import {writeToFile} from '@rxtk/fs';

const data = [
  '"animal","coolness"',
  '"dolphin",10',
  '"algea",1',
  '"mermaid",6',
  '"octopus",9',
  '"octopus",9',
  '"narwhale",8',
];

const writeStream$ = of(...data).pipe(
  writeToFile({filePath: path.resolve(__dirname, './output.csv')})
);
// write the input observable to the file
writeStream$.subscribe(console.log);
```
npm package: @rxtk/logs
Description: 🗒️ Logging instrumentation
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/logs

## Getting started

```bash
npm i @rxtk/logs
```

```bash
yarn add @rxtk/logs
```

## API

### logger
```javascript
import logger from '@rxtk/logs';

// Log info
const data = {foo: 'bar'};
logger.info('an info message', data);
logger.debug('a debug message', data);

// Log an error
const err = new Error('ruh roh');
logger.error(err.message, {stack: err.stack, ...data});
```

### toLog
```javascript
import {of} from 'rxjs';
import logger from '@rxtk/logs';

const input$ = of(...[{data: 'foo'}, {data:'bar'}]);
input$.pipe(logger.toLog('somelabel'));
input$.subscribe(); // will log the values of each item emitted with the provided label
```

### trace
```javascript
import {throwError} from 'rxjs';
import logger from '@rxtk/logs';

const err = new Error('zoinks!');
const input$ = throwError(err);
input$.pipe(logger.trace());
input$.subscribe(); // will log any errors emitted including their stack trace
```
npm package: @rxtk/s3
Description: 🪣 RXJS operators for working with AWS S3
Author: Buccaneer LLC
Latest version: 1.0.0

# @rxtk/s3
> 🪣 RXJS operators for working with AWS S3

```bash
yarn add @rxtk/s3
```

## API

### `fromS3File`
Downloads a file to AWS S3 (as a stream).
```js
import AWS from 'aws-sdk';
import {concat} from 'rxjs';
import {fromS3file} from '@rxtk/s3';

// Download AWS S3 file as a stream of file chunks (Buffers)
const downloadParams = {
  s3Bucket: 'my-fabulous-bucket',
  s3Key: 'path/to/file/hello-world.json',
  byteLength: 32000, // (Optional) Size of the download chunks. Defaults to 32000.
  s3Client: new AWS.S3(), // (Optional) The s3 client to use
  rawResponse: false, // (Optional) - expose raw S3 JSON responses. Defaults to false.
};
const bufferChunk$ = fromS3File(downloadParams);
bufferchunk$.subscribe(console.log);
```

### `toS3File`
Uploads a file to AWS S3 (as a stream).
```js
import {concat} from 'rxjs';
import {toS3File} from '@rxtk/s3';

// create a stream of file chunks
const chunk0 = Buffer.from('{"hello":');
const chunk1 = Buffer.from('"world"}');
const chunk$ = concat(chunk0, chunk1);

// upload the chunks to an AWS S3 file
const uploadParams = {
  s3Bucket: 'my-fabulous-bucket',
  s3Key: 'path/to/file/hello-world.json',
  contentType: 'application/json',
};
const upload$ = chunk$.pipe(toS3File(uploadParams));
upload$.subscribe(console.log);
```
npm package: @rxtk/socketio
Description: 🚰 Hooks for RxJS Observables to interface with Socket.io (v4) servers
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/socketio
> 🚰 Hooks for RxJS Observables to interface with Socket.io (v4) servers

```bash
npm i @rxtk/socketio
```

```bash
yarn add @rxtk/socketio
```

## Compatability

| Platform | Support |
| :--- | :--- |
| node.js \(&gt;10.0\) | ✅ |
| Browsers | ✅ |
| React Native | ✅ |
| Electron | ✅ |

## API

### `conduit()`
Opens a two-way channel of communication with the server.  Items sent into
the operator will be sent to the server.  By default, the output stream is the messages
sent back from the server.
```js
import {from} from 'rxjs';
import {conduit} from '@rxtk/socketio';

const messageIn$ = from([
  {topic: 'message', body: 'yarrr'},
  {topic: 'message', body: 'arrr matey'},
  {topic: 'message', body: 'Vitamin C? Never heard of it.'},
  {topic: 'message', body: 'Why is all the rum gone?'},
]);

const socketConfig = {
  url: 'http://localhost:9080/ws', // socket.io server
  topics: ['message'], // topics to subscribe to. (Defaults to ['message']).
  // the socket options get passed directly to the Socket.io instance, allowing
  // any customization that the socket.io client supports.
  socketOptions: {
    transports: ['websocket'],
    auth: {token: 'secretjwttoken'},
  },
}; 
// the conduit operator sends messages from messageIn$ and emits messages 
// from the server
const messageBack$ = messageIn$.pipe(conduit({...socketConfig}));
messageBack$.subscribe(console.log);
messageBack$.error$.subscribe(console.error); // optional: handle errors
// {topic: 'message', body: 'Welcome Matey.'}
// {topic: 'message', body: 'Yo ho. Yo ho. I am a message from the server.'}
```

You can also send binary data:
```js
import {from} from 'rxjs';
import {conduit} from '@rxtk/socketio';

const messageIn$ = from([
  {topic: 'next-audio-chunk', index: 0, binary: Buffer.from('foobar', 'base64')},
  {topic: 'next-audio-chunk', index: 1, binary: Buffer.from('foobar', 'base64')},
]);
const socketConfig = {
  url: 'http://localhost:9080/ws',
  topics: ['message', 'audio-received'],
};
messageIn$.pipe(conduit({...socketConfig}));
// {topic: 'audio-received', index: 0}
// {topic: 'audio-received', index: 1}
```

## Advanced configuration
The library also supports some advanced features commonly needed in real applications:
- sending binary
- verifying receipt of messages before sending the next
- customizing the socket.io client
- adding serializers/deserializers
- handling disconnections

See the the code (`src/operators/conduit`) for advanced configuration options.  This is a pretty lightweight wrapper and the code should be pretty easy to read and understand.
npm package: @rxtk/streams
Description: 🐠 RxJS operators and utilities for worth with streams (node.js ReadableStream, pipes, etc.)
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/streams
> 🐠 RxJS operators and utilities for worth with streams (node.js ReadableStream, pipes, etc.)

## Installation
This is a private package. It requires setting up access in your npm config.

```bash
yarn add @rxtk/streams
```

## API

### `fromReadableStream`
Creates an RxJS observable from a node.js ReadableStream.
```js
import {createReadStream} from 'fs';
import {fromReadableStream} from '@rxtk/streams';

const readStream = createReadStream('/path/to/my/file.json');
const buffer$ = fromReadableStream(readStream);
buffer$.subscribe(console.log);
// First Buffer content...
// Second Buffer content...
// etc.
```

### `streamFromObservable`
Creates a node.js ReadableStream from an RxJS observable:
```js
import {streamFromObservable} from '@rxtk/streams';

const string$ = from(["hello", "wo", "rld", "!"]);
const readStream = streamFromObservable(string$)
  .on('data', console.log)
  .on('error', console.error)
  .on('end', () => console.log('DONE'));
// hello
// wo
// rld
// !
// DONE
```

### `toNodePipes`
This RxJS operator allows you to use node.js pipes within an RxJS observable.
```js
import {from} from 'rxjs';
import csvParser from 'csv-parse';
import {toNodePipes} from '@rxtk/streams';

const csvString$ = from([
 '"name","systolicBp","dialostilicBp","message"\n', 
 '"Blackbeard",140,91,"Yarr"\n"Crunch",120,', 
 ',180,"Arr"\n"Sparrow",110,70,"Savvy"\n',
]);
const row$ = from(rows);
const pipes = [csvParser()];
const csvStr$ = string$.pipe(
  toNodePipes(...pipes)
);
csvStr$.subscribe(console.log);
// "message"\n
// "Hello"\n
// "My dear sir\n"
// "Arrr"\n
```
Under the hood, this operator does three things:
1. Transform the input observable into a ReadableStream
2. Pipe that ReadableStream into the provided pipe(s) (in the same order in which they were passed in)
3. Pass the stream's output back to an RxJS output Observable

> ⭐️ This operator is meant to be used as syntactic sugar for simple cases.  In some cases, you may need to fine-tune things to your own liking, in which case it might be better to compose your own pipelines from the other helper functions in this module.
npm package: @rxtk/stt-aws
Description: 👂 RxJS operator for realtime speech-to-text (STT/S2T) using AWS Transcribe
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/stt-aws
> 👂 An RxJS operator for real-time speech-to-text (STT/S2T) streaming using the AWS Transcribe.

```bash
npm i @rxtk/stt-aws
```

```bash
yarn add @rxtk/stt-aws
```

⚠️ To run the AWS Transcribe pipeline, you'll need a valid ACCESS_KEY_ID and SECRET_ACCESS_KEY with permissions to run AWS Transcribe. You'll need to set these in the environment or else it will probably not work.  Unfortunately, this module does not auto-detect AWS credentials stored in `~/.aws`.

⚠️ node.js only. This has not been tested on Browsers but it might be possible to make it work.  If you get it working, please make a PR!

## API

### `toAWSTranscribe`
Stream audio speech data to AWS Transcribe via WebSocket and get transcripts back:
```js
import {map} from 'rxjs/operators';
import {toAWSTranscribe} from '@rxtk/stt-aws';

// The pipeline can take a stream of audio chunks encoded as 
// LINEAR16 (PCM encoded as 16-bit integers) in the form of a Buffer
const stt$ = pcmChunkEncodedAs16BitIntegers$.pipe(
  map(chunk => Buffer.from(chunk, 'base64')),
  toAWSTranscribe()
);
stt$.subscribe(console.log); // log transcript output
stt$.error$.subscribe(console.error) // handle WebSocket errors
```

> ⚠️ Pay attention to the endcoding of the audio data.  The operator only accepts PCM data encoded as 16-bit integers. For example, LINEAR16 encoding usually works.

## Guides
- [Introduction to audio data](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts)
npm package: @rxtk/stt-deepgram
Description: 👂 RxJS operator for realtime speech-to-text (STT/S2T) using Deepgram speeh-to-text
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/stt-deepgram
> 👂 An RxJS operator for real-time speech-to-text (STT/S2T) streaming using the Deepgram speech-to-text API.

```bash
npm i @rxtk/stt-deepgram
```

```bash
yarn add @rxtk/stt-deepgram
```

⚠️ To run the Deepgram transcription pipeline, you will need to provide a deepgram username and password.

⚠️ node.js only. This has not been tested on Browsers but it might be possible to make it work.  If you get it working, please make a PR!

## Demo
Create a .env file with your `DEEPGRAM_PASSWORD` and `DEEPGRAM_USERNAME`:
```bash
echo 'DEEPGRAM_PASSWORD=MYPASSWORD' >> .env
echo 'DEEPGRAM_USERNAME=MYUSERNAME' >> .env
```

Run the demo!
```bash
yarn build # you must build the code before running the demo
yarn demo run
```

## API

### `toDeepgram`
Stream audio speech data to transcription service via WebSocket and get transcripts back:
```js
import {map} from 'rxjs/operators';
import {toDeepgram} from '@rxtk/stt-deepgram';

// The pipeline can take a stream of audio chunks encoded as 
// LINEAR16 (PCM encoded as 16-bit integers) in the form of a Buffer
const buffer$ = pcmChunkEncodedAs16BitIntegers$.pipe(
  map(chunk => Buffer.from(chunk, 'base64')),
  toDeepgram({
    username: process.env.DEEPGRAM_USERNAME,
    password: process.env.DEEPGRAM_PASSWORD,
  })
);
buffer$.subscribe(console.log); // log transcript output
```

> ⚠️ Pay attention to the endcoding of the audio data.  The operator only accepts PCM data encoded as 16-bit integers. For example, LINEAR16 encoding usually works.

## Guides
- [Introduction to audio data](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts)
npm package: @rxtk/stt-gcp
Description: 👂 RxJS operator for realtime speech-to-text (STT/S2T) using Google speeh-to-text
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/stt-gcp
> 👂 An RxJS operator for real-time speech-to-text (STT/S2T) streaming using the GCP speech-to-text API.

> 🍎 If you are using an Apple Silicon (ARM) machine, this package only works in node >15.x


```bash
yarn add @rxtk/stt-gcp
```

⚠️  To run the GCP transcription pipeline, you will need to provide a path to JSON containing your `GOOGLE_APPLICATION_CREDENTIALS`. You can set this as an environment variable or pass it in.

⚠️  node.js only. This has not been tested on Browsers but it might be possible to make it work.  If you get it working, please make a PR!

## API

### `toGCPSpeech`
Stream audio speech data to AWS Transcribe via WebSocket and get transcripts back:
```js
import {map} from 'rxjs/operators';
import {toGCPSpeech} from '@rxtk/stt-gcp';

// The pipeline can take a stream of audio chunks encoded as 
// LINEAR16 (PCM encoded as 16-bit integers) in the form of a Buffer
const buffer$ = pcmChunkEncodedAs16BitIntegers$.pipe(
  map(chunk => Buffer.from(chunk, 'base64')),
  toGCPSpeech({
    sampleRate: 16000, // optional
    contentType: 'audio/l16', // optional
    googleCreds: process.env.GOOGLE_APPLICATION_CREDENTIALS, // required
    useSpeakerLabels: true, // optional
    useWordConfidence: true, // optional
    usePunctuation: true, // optional
  })
);
buffer$.subscribe(console.log); // log transcript output
```

## Guides
- [Introduction to audio data](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts)
npm package: @rxtk/stt-ibm
Description: 👂 An RxJS operator for real-time speech-to-text (STT/S2T) streaming using the IBM Watson.
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/stt-ibm
> 👂 An RxJS operator for real-time speech-to-text (STT/S2T) streaming using the IBM Watson.

```bash
yarn add @rxtk/stt-ibm
```

You'll need an IBM Watson account with credentials for the STT API.

## Demo
To run the demo pipeline:
```bash
yarn demo:run <myInstanceId> --secret <secretAccessKey> --write-output
```

## API

### `toIBM`
```js
import {from} from 'rxjs';
import {myFunction} from '@rxtk/stt-ibm';
import {fromFile} from '@rxtk/fs';

const filePath = 'path/to/audio-file.linear16';
// For a full list of options, see ./src/lib/toIBM.js
const params = {
  secretAccessKey: process.env.IBM_SECRET_ACCESS_KEY,
  instanceId: process.env.IBM_STT_INSTANCE_ID,
  region: 'us-east',
};
const audioChunk$ = fromFile(filePath);
const output$ = string$.pipe(toIBM(params));
output$.subscribe(console.log); 
// Output:
// {...resultFromIBMWatson}
// {...anotherResultFromIBMWatson}
output$.error$.subscribe(console.error); // optional: handle Websocket Errors
```

## References
- [IBM Speech-to-text docs](https://cloud.ibm.com/docs/speech-to-text?topic=speech-to-text-websockets)
npm package: @rxtk/ws
Description: 🔌 RxJS operators for working with WebSockets
Author: Buccaneer LLC
Latest version: 0.0.0

# @rxtk/ws
> 🔌 RxJS operators for working with WebSockets

```bash
yarn add @rxtk/ws
```

## API

### `conduit`
Opening a two-way WebSocket is a very common software pattern.  The `conduit` operator makes it trivially easy to do this.  It pipes an Observable into a two-way websocket. Each item in the input Observable will be published to the server. The output Observable will be the messages sent from the server to the client.

Optionally, it can be performed using a custom serializer or deserializer -- otherwise, it will assume the messages are encoded/decoded as JSON and transmitted as JSON strings.

The conduit also supports error handling and many disconnection scenarios (see examples below).

#### Basic usage
```javascript
import { from } from 'rxjs';
import { conduit } from '@rxtk/ws';

const messagesToSend$ = from([
  {body: 'data'},
  {body: 'more data'},
]);
const socketResponse$ = messageToSend$.pipe(
  conduit({url: 'wss://mysite.com'})
);

socketResponse$.subscribe(); // this will attempt to send the messages to the server
```

#### With error handling
```javascript
import { from } from 'rxjs';
import { conduit } from '@rxtk/ws';

const messagesToSend$ = from([
  {body: 'data'},
  {body: 'more data'},
]);
const socketResponse$ = messageToSend$.pipe(
  conduit({url: 'wss://mysite.com'})
);

socketResponse$.subscribe(); // this will attempt to send the messages to the server
socketResponse$.error$.subscribe(); // returns WebSocket errors
```

#### Custom serialization
```javascript
import { from } from 'rxjs';
import { conduit } from '@rxtk/ws';

const decodeMessage = base64Message => atob(base64Message);
const encodeMessage = binaryString => btoa(binartString);

const messagesToSend$ = from([
  'somebinarystring',
  'anotherbinarystring',
]);
const socketResponse$ = messageToSend$.pipe(
  conduit({
    url: 'wss://mysite.com',
    serializer: encodeMessage,
    deserializer: decodeMessage,
  })
);
socketResponse$.subscribe();
```
npm package: @rxts/koa-router-decorators
Description: Decorators for koa-router, inspired by Java Annotations of Spring MVC framework
Author: JounQin
Latest version: 0.2.1

# koa-router-decorators

> Decorators for koa-router, inspired by Java Annotations of Spring MVC framework

## TOC <!-- omit in toc -->

- [Install](#install)
- [Usage](#usage)
- [Changelog](#changelog)
- [License](#license)

## Install

```sh
# yarn
yarn add @rxts/koa-router-decorators

# npm
npm i @rxts/koa-router-decorators
```

## Usage

```ts
import Koa, { Context } from 'koa'

import { Controller, Method, RequestMapping } from '@rxts/koa-router-decorators'

@Controller
@RequestMapping({
  method: Method.POST,
})
export class CommonController {
  @RequestMapping('/', Method.GET)
  helloWorld(ctx: Context) {
    ctx.body = 'Hello World'
  }

  @RequestMapping({
    method: Method.GET,
    path: /^\/\d{3}$/,
  })
  testRegExp(ctx: Context) {
    ctx.body = ctx.url
  }
}

const app = new Koa()
const router = new KoaRouter()

injectAllRoutes(router)

app.use(router.routes())
app.use(router.allowedMethods())
```

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @rxts/react-qrcode
Description: 🤳 A React component for QR code generation with `qrcode`
Author: JounQin
Latest version: 0.1.1

# VueQRCode

> 🤳 A React component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode)

## Usage

```tsx
// Component
import ReactDOM from 'react-dom'
import { QRCode } from '@rxts/react-qrcode'

ReactDOM.render(<QRCode value="https://www.1stg.me" />)

// hooks
import { useQRCode } from '@rxts/react'

export const App = () => {
  const [value, setValue] = useState('https://www.1stg.me')
  const dataUrl = useQRCode(value)
  return (
    <>
      <div>dataUrl: {dataUrl}</div>
      <img src={dataUrl} />
      <input onChange={e => setValue(e.currentTarget.value)} />
    </>
  )
}
```

## Available Props

| prop                   | type (range)                                                       | default value                               |
| ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
| `version`              | `number` (1-40)                                                    | N/A                                         |
| `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'`                                       |
| `maskPattern`          | `number` (0-7)                                                     | N/A                                         |
| `toSJISFunc`           | `Function`                                                         | N/A                                         |
| `margin`               | `number`                                                           | `4`                                         |
| `scale`                | `number`                                                           | `4`                                         |
| `width`                | `number`                                                           | N/A                                         |
| `color`                | `{ dark: string; light:string }`                                   | `{ dark: '#000000ff', light: '#ffffffff' }` |
| `type`                 | `string` ('image/png', 'image/jpeg', 'image/webp')                 | `'image/png'`                               |
| `quality`              | `number`(0-1)                                                      | `0.92`                                      |
| `value`                | `string | Array<{ data: string; mode?: string }>`                  | N/A                                         |
npm package: @rxts/react-rx
Description: 👁️ RxJS integration for React.
Author: JounQin
Latest version: 0.7.3
Deprecated: Please use @react-enhanced/hooks instead

# @rxts/react-rx

👁️ RxJS integration for React.

## Demo

[TodoList](/react-rx)

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @rxts/react-storage
Description: 🔥 React hooks for using localStorage/sessionStorage
Author: JounQin
Latest version: 0.7.2
Deprecated: Please use @react-enhanced/hooks instead

# @rxts/react-storage

🔥 React hooks for using localStorage/sessionStorage

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @rxts/rxjs-tslint
Description: TSLint rule for RxJS
Author: Minko Gechev
Latest version: 0.2.1

# RxJS TSLint [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/rx-ts/rxjs-tslint)

TSLint rules for rxjs.

## Rules

This repository provides the following rules:

| Rule name                         | Configuration | Description                                          |
| --------------------------------- | ------------- | ---------------------------------------------------- |
| rxjs-collapse-imports             | none          | Collapses multiple imports from rxjs to a single one |
| rxjs-pipeable-operators-only      | none          | Migrates side-effect operators to pipeables          |
| rxjs-no-static-observable-methods | none          | Migrates static Observable method calls              |
| rxjs-proper-imports               | none          | Updates RxJS 5.x.x imports to RxJS 6.0               |

## Migration to RxJS 6

Using the current set of rules allows you to automatically migrate your project which uses RxJS 5 to RxJS 6. Here's how you can perform the automatic migration:

```bash
npm i -g @rxts/rxjs-tslint
rxjs-5-to-6-migrate -p [PATH_TO_TSCONFIG]
```

For an Angular CLI project the invocation of `rxjs-5-to-6-migrate` will be:

```bash
rxjs-5-to-6-migrate -p src/tsconfig.app.json
```

**Note:** The rules use type checking to find all the instances of operators that need to be migrated to pipeables. This requires you to have `rxjs@5` installed so that tslint could find the correct type definitions.

*If you're following the migration instructions from https://update.angular.io, between versions 5 and 6 you'll have to run `ng update @angular/core`. This step will install `rxjs-compat`, which will let `rxjs-5-to-6-migrate` to perform the correct code transformations.*

## Use rules

To use the exported rules without `rxjs-5-to-6-migrate`, use the `rulesDirectory` configuration property of `tslint.json`:

```json
{
  "rulesDirectory": [
    "node_modules/@rxts/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}
```

To lint your project use:

```
./node_modules/.bin/tslint -c tslint.json -p tsconfig.json
```

### Notes

* Once you run all the migrations check the diff and make sure that everything looks as expected. These fixers cover almost all cases we know of, but it's possible that some manual fixes can be required.
* Although the migration will format your source code, it's likely that that the style is not consistent with the rest of your project. To make sure that everything is properly following your project's style guide, we recommend you apply a formatter such as prettier or clang-format after the edits are made.

## License

MIT
npm package: @rxts/vue-qrcode
Description: 🤳 A Vue component for QR code generation with `qrcode`
Author: JounQin
Latest version: 0.1.1

# VueQRCode

> 🤳 A Vue component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode)

## Usage

```vue
<template>
  <qrcode value="https://www.1stg.me" />
</template>
<script>
import Qrcode from 'vue-qrcode'

export default {
  components: {
    Qrcode,
  },
}
</script>
```

## Available Props

| prop                   | type (range)                                                       | default value                               |
| ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
| `version`              | `number` (1-40)                                                    | N/A                                         |
| `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'`                                       |
| `maskPattern`          | `number` (0-7)                                                     | N/A                                         |
| `toSJISFunc`           | `Function`                                                         | N/A                                         |
| `margin`               | `number`                                                           | `4`                                         |
| `scale`                | `number`                                                           | `4`                                         |
| `width`                | `number`                                                           | N/A                                         |
| `color`                | `{ dark: string; light:string }`                                   | `{ dark: '#000000ff', light: '#ffffffff' }` |
| `type`                 | `string` ('image/png', 'image/jpeg', 'image/webp')                 | `'image/png'`                               |
| `quality`              | `number`(0-1)                                                      | `0.92`                                      |
| `value`                | `string | Array<{ data: string; mode?: string }>`                  | N/A                                         |
npm package: @rxweb/angular
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.30

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/angular-localization
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.4

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>