open-index/open-npm huggingface dataset:
npm package: @inovue/reqr
Author: inovue
Latest version: 0.0.0

# REACT QRCODE READER (REQR)


[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/inovue/reqr)

## What is this?
This is Visual Studio Code (Dev container) template for a Vite + React + TailwindCSS + TypeScript + ESLint + Prettier + Jest + React Testing Library project.

## Why use Dev Container?
By cloning a repository from a remote repository directly to devcontainer, you can develop applications without contaminating your PC.


## How to use?
1. Click the "Open in Dev Containers" badge above.
2. Wait for the container to be built.


## References

[Add crop functionality to BrowserCodeReader](https://github.com/zxing-js/library/issues/39#issuecomment-769339674)

[ReactでQRコードリーダーを実装する](https://qiita.com/faunsu/items/2f13f1378b4f36b040b6)
[Zxingでバーコードリーダーを作ってみた](https://stak.tech/news/14668)

[WebRTCにおけるメディアの取り扱い](https://qiita.com/udonchan/items/77ca19f9aa8420e769c8)


★[Let's light a torch and explore MediaStreamTrack's capabilities](https://oberhofer.co/mediastreamtrack-and-its-capabilities/#waitandsee)

[Web でカメラを使おう – WebRTC (getUserMedia) on WebView](https://houwa-js.co.jp/2019/06/20190604/)


[Capabilities, constraints, and settings](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints)


[ブラウザのJavaScriptだけで名刺検出やってみる](https://zenn.dev/kikuchy/scraps/9ee6fb4e0e7c25)
[【 ocr の認識率を上げる画像処理】初心者でも簡単なノイズ除去](https://chuckischarles.hatenablog.com/entry/2018/11/26/105446)


NPM Publish
[Viteのライブラリモードを使ってnpmパッケージを作成&公開してみる](https://zenn.dev/s_takashi/articles/20ecebd0a42010)

[Creating a TypeScript Package with Vite](https://onderonur.netlify.app/blog/creating-a-typescript-library-with-vite/)
npm package: @inox-tools/aik-mod
Description: AIK Plugin for inline modules
Author: Luiz Ferraz
Latest version: 0.14.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Inline Modules AIK Plugin

Plugin exposing `@inox-tools/inline-mod` as an [Astro Integration Kit](https://astro-integration-kit.netlify.app/) plugin.

### License

Inline Modules AIK Plugin is available under the MIT license.
npm package: @inox-tools/aik-route-config
Description: <p align="center">     <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/> </p>
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Per-Route Configuration AIK Plugin

A plugin to allow configuring integration behavior per route easily.

### License

Per-Route Configuration AIK Plugin is available under the MIT license.
npm package: @inox-tools/astro-tests
Description: Utilities for testing your own Astro integrations and libraries based on Astro's own testing tools
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro Test Tools

Test tooling and utilities based on Astro's own internal testing tools.

See [docs](https://inox-tools.fryuni.dev/astro-tests).

## Install

```sh
npm install @inox-tools/astro-tests
```
npm package: @inox-tools/astro-when
Description: Integration that informs when in Astro's lifecycle the code is running
Author: Luiz Ferraz
Latest version: 2.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro When

Integration that informs when in Astro's lifecycle the code is running.

### License

Astro When is available under the MIT license.
npm package: @inox-tools/content-utils
Description: Utilities to work with content collections on an Astro project from an integration or library.
Author: Luiz Ferraz
Latest version: 0.14.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro Content Utils

Utilities to work with content collections on an Astro project from an integration or library.

## Install

```sh
npm i -D @inox-tools/content-utils
```

### License

Astro Content Utils is available under the MIT license.
npm package: @inox-tools/custom-routing
Description: Define custom routing instead of Astro's default file-based routing.
Author: Luiz Ferraz
Latest version: 2.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro Custom Routing

This integration allows you to define custom routes for your Astro project independent of the file-system. Use whatever logic you want to define your routes.

```ts
// astro.config.mjs
import { customRouting } from '@inox-tools/custom-routing';

export default defineConfig({
  integrations: [
    customRouting({
      // Use Astro files outside of src/pages as the entrypoint
      '/blog/[...slug]': './src/routes/blog.astro',

      // Reuse the same entrypoint for more than one route for more precise control
      // here defining that the route should be only on the tag index and with a single segment
      tag: './src/routes/tags.astro',
      'tag/[tag]': './src/routes/tags.astro',

      // Publish common Astro files shared across projects as dependencies and use them here
      compliance: '@company/legal-pages/compliance.astro',
    }),
  ],
});
```

### License

Custom Routing is available under the MIT license.
npm package: @inox-tools/cut-short
Description: Immediately halt request processing and return custom responses effortlessly.
Author: Luiz Ferraz
Latest version: 2.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Cut Short

Immediately halt request processing and return custom responses effortlessly.

## Install

```sh
npm i @inox-tools/cut-short
```

Add the integration to your `astro.config.mjs`:

```js
// astro.config.mjs
import { defineConfig } from 'astro';
import cutShort from '@inox-tools/cut-short';

export default defineConfig({
  integrations: [cutShort({})],
});
```
npm package: @inox-tools/modular-station
Description: Simplifying Astro integrations with a flexible docking system.
Author: Luiz Ferraz
Latest version: 0.9.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro Modular Station

Simplifying Astro integrations with a flexible docking system.

### License

Astro Modular System is available under the MIT license.
npm package: @inox-tools/portal-gun
Description: Transport HTML elements through your page during rendering using Portals.
Author: Luiz Ferraz
Latest version: 2.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Portal Gun

Transport HTML elements through your page during rendering using Portals.

## Install

```sh
npm i @inox-tools/portal-gun
```

Add the integration to your `astro.config.mjs`:

```js
// astro.config.mjs
import { defineConfig } from 'astro';
import portalGun from '@inox-tools/portal-gun';

export default defineConfig({
  integrations: [portalGun()],
});
```
npm package: @inox-tools/request-nanostores
Description: Make your Nanostores concurrent safe and shared from server to client
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Request Nanostores

[Nanostores](https://github.com/nanostores/nanostores) is a great and super compact state management library that is compatible with multiple frameworks, even with multiple at the same time. Nanostores has been Astro's recommended option for sharing state [between components](https://docs.astro.build/en/recipes/sharing-state/) and [between client islands](https://docs.astro.build/en/recipes/sharing-state-islands/).

Using Nanostores directly with Astro has some caveats, as explained on Astro's ["Why Nano Stores?" FAQ](https://docs.astro.build/en/recipes/sharing-state-islands/#why-nano-stores). They are meant for the client-side. Using them on the server, be it on framework components or on the frontmatter of Astro components, may cause problems with data race between requests. Once the page is rendered, the stores on the client won't have the data from the stores on the server, which may cause flickering and flashing of content on the screen as the client renders a different content from the server.

This integration bridges this gap and enables the use of Nanostores in Astro across server and client isolated on each request.

## Installing the dependency

```sh
npm i @inox-tools/request-nanostores
```

Add the integration to your `astro.config.mjs`:

```js
// astro.config.mjs
import { defineConfig } from 'astro';
import requestNanostores from '@inox-tools/request-nanostores';

export default defineConfig({
  integrations: [requestNanostores({})],
});
```

### Prerequisites

When using the Cloudflare adapter, you'll need to [enable AsyncLocalStorage manually](https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-only-asynclocalstorage).

## How to use

Wrap your stores using the `shared` function, giving it a name.

**The store name must be unique across your entire project!**.

```ts del={4} ins={5}
import { atom } from 'nanostores';
import { shared } from '@it-astro:request-nanostores';

export const $cart = atom([]);
export const $cart = shared('cart', atom([]));
```

It doesn't have to be an atom! You can use any store that is based on an atom:

```ts
import { shared } from '@it-astro:request-nanostores';
import { atom, map, deepMap } from 'nanostores';

export const $atom = shared('atom', atom([]));
export const $map = shared('map', map({}));
export const $deepMap = shared('deepMap', deepMap({}));
```

:::tip[Is it an Atom?]
If you don't know if a Nano Store is based on an Atom or not to use with this library, just try it!

Nano Stores are very well typed, so TypeScript will know if they are compatible or not.
:::

## License

Request Nanostores is available under the MIT license.
npm package: @inox-tools/request-state
Description: Shared request state between server and client
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Request State

Astro provides [`Astro.locals`/`context.locals`](https://docs.astro.build/en/reference/api-reference/#astrolocals) for shared state between different components being rendered in a page.

This state can only be accessed from an Astro component using the `Astro` constant or from middlewares from the context. Sharing state between framework components is not provided and inconvenient. State using `Astro.locals` is also not shared with the client after the request completes, resulting in problems with the server and the client rendering different contents.

This library provides a solution for those problems:

- You can share state between any component used in a request, even between frameworks.
- The final state formed in the server while rendering a request is available for all client code running in the rendered page.
- UI framework components can keep their state from server to client.

## Installing the dependency

```sh
npm i @inox-tools/request-state
```

Add the integration to your `astro.config.mjs`:

```js
// astro.config.mjs
import { defineConfig } from 'astro';
import requestState from '@inox-tools/request-state';

export default defineConfig({
  integrations: [requestState({})],
});
```

### Prerequisites

When using the Cloudflare adapter, you'll need to [enable AsyncLocalStorage manually](https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-only-asynclocalstorage).

## How to use

Import the two functions anywhere in your code:

```ts
import { getState, setState } from '@it-astro:state';

setState('some key', 'some value');

const state = getState('some key');
```

Alternatively, provide an initial value to be used if not present in the state:

```ts
import { getState } from '@it-astro:state';

// `'initial value'` will be used if `'some key'` is not in the state
const state = getState('some key', 'initial value');
```

The state can be any value supported by the [`devalue` library](https://www.npmjs.com/package/devalue) plus:

- `Date`s
- `URL`s
- Global symbols (`Symbol.for`)
- Well-known symbols (`Symbol.XXX`)

### `setState`

Params:

- `key` (`string`): The key of a value in the state
- `value` (`unknown`): The value to be set

### `getState`

Params:

- `key` (`string`): The key of a value in the state
- `valueIfMissing` (`unknown`): An optional value to set if there is no value in the state for the given key.

Returns the value of the state for the given key, if present. If now, sets the value to `valueIfMissing` and returns it.

## License

Astro Request State is available under the MIT license.
npm package: @inox-tools/runtime-logger
Description: Expose Astro Integration Logger at runtime for consistent output
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Runtime Logger

Expose Astro Integration Logger at runtime for consistent output

## Install

```sh
npm i @inox-tools/runtime-logger
```

## Using the integration

To enable this, you need to register your integration to have a runtime logger under some name:

```ts
import { runtimeLogger } from '@inox-tools/runtime-logger';

export default () => ({
  name: 'your-integration',
  hooks: {
    'astro:config:setup': (params) => {
      runtimeLogger(params, {
        name: 'your-integration',
      });
    },
  },
});
```

With that in place, your runtime code can now access the logger by importing the generated module `@it-astro:logger:<name>`:

```astro
---
import { logger } from '@it-astro:logger:your-integration';

logger.info('Hello World!');
---
```

## License

Astro Runtime Logger is available under the MIT license.
npm package: @inox-tools/server-islands
Description: Common tools and utilities for working with Server Islands.
Author: Luiz Ferraz
Latest version: 0.6.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Server Islands

Common tools and utilities for working with Server Islands.

## Install

```js
npm i @inox-tools/server-islands
```

Add the integration to your `astro.config.mjs`:

```js
// astro.config.mjs
import { defineConfig } from 'astro';
import serverIslands from '@inox-tools/server-islands';

export default defineConfig({
  integrations: [serverIslands({})],
});
```
npm package: @inox-tools/sitemap-ext
Description: Higher level extension over Astro's official sitemap integration
Author: Luiz Ferraz
Latest version: 0.9.1

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Astro Sitemap Extended

Wrapper on `@astrojs/sitemap` for declaring how each page should be handled in the sitemap inline.

### License

Astro Sitemap Extended is available under the MIT license.
npm package: @inox-tools/star-warp
Description: Warp-drive search for Astro sites using Pagefind
Author: Luiz Ferraz
Latest version: 1.0.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Star Warp

Pagefind warp-drive search for Astro sites.

See [docs](https://inox-tools.fryuni.dev/star-warp)

## Install

```sh
astro add @inox-tools/star-warp
```
npm package: @inox-tools/utils
Description: A collection of utilities used throughout Inox Tools
Author: Luiz Ferraz
Latest version: 1.1.1

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Utils

A collection of utilities used throughout Inox Tools.

## Install

```sh
npm i -D @inox-tools/utils
```

### License

These utilities are available under the MIT license.
npm package: @inox-tools/velox-luna
Description: Accelerate your i18n translation work on Lunaria projects
Author: Luiz Ferraz
Latest version: 0.6.0

<p align="center">
    <img alt="InoxTools" width="350px" src="https://github.com/Fryuni/inox-tools/blob/main/assets/shield.png?raw=true"/>
</p>

# Velox Luna

Workflow automation for [Lunaria](https://lunaria.dev/).

### License

Velox Luna is available under the MIT license.