open-index/open-npm huggingface dataset:
npm package: @marcotommoro/react-ethereum-auth-hook
Description: ``` *** DEVELOPMENT IN PROGRESS *** *** Please contact me for bugs *** ```
Author: Marco Moroni
Latest version: 0.1.3


```
*** DEVELOPMENT IN PROGRESS ***
*** Please contact me for bugs ***
```

# Next / React Ethereum Auth Hook

### Implements metamask functions:
1. connect wallet
2. get address
3. change network

### Implements web3-auth function from library
1. get signed token


<br>

## Install

    npm i @marcotommoro/react-ethereum-auth-hook

<br>

## Add to project
1. add **EthereumContextProvider** to `_app.tsx`:
   | param | type | default
   | :---: | :---: | :---: |
   | `autoCheckCorrectNetwork` <br> auto check that the network is always the same as the one specified in the .env (or 0x1 by default) | boolean | true|
   |  |  |


   ```javascript
    import { EthereumContextProvider } from "@marcotommoro/react-ethereum-auth-hook";


    function MyApp({ Component, pageProps }: AppProps) {
        return (
            <EthereumContextProvider autoCheckCorrectNetwork={true}>
              ...
              <Component {...pageProps} />
              ...
            </EthereumContextProvider>
        );
    }

   ```
2. **useEthereum** in a react/next component:
   ```javascript
    const {
        address,
        currentNetwork,
        isMetamaskInstalled,
        isNetworkCorrect,
        connect,
        correctNetwork,
        getToken,
    } = useEthereum();

   ```

3. (optional) set env `NEXT_PUBLIC_NETWORK_ID` with your testnet id. Default Ethereum mainnet `0x1`.<br>
[Check networks id on Metamask documentation](https://docs.metamask.io/guide/ethereum-provider.html#chain-ids)

<br>

## Instructions

| key | value |
|:---: | :---: |
| address | Current metamask address selected. |
| currentNetwork | Current network selected. |
| isMetamaskInstalled | Check if ```window.ehtereum``` is present. |
| isNetworkCorrect | Check if is the correct network. If ```process.env.NEXT_PUBLIC_NETWORK_ID``` is not present, the default network is Ethereum mainnet ('`0x1`') |
| connect | Ask user to connect your beautiful react app with metamask extension. |
| correctNetwork | Ask user permission to switch to the right network. |
| getToken | Ask user to sign a transaction and get a signed token to use in a backend server to validate the user is really him/her/it.|
npm package: @marcow/desktop-wallet-theme
Description: Spacial Ark Wallet Template
Author: Rastrow
Latest version: 0.0.1

(**THIS IS A TEMPLATE**)

# Theme name - ARK Desktop Wallet plugin
Description of your theme

## Installation

 1. Clone this repository or [download it](https://github.com/ark-ecosystem-desktop-plugins/theme-template/archive/master.zip) and unzip it into `~/.ark-desktop/plugins/`.
 2. Start the desktop wallet.
 3. Enable the plugin on the plugin section.
 4. Change theme in the Settings menu, on the sidebar.

## Credits

- [Your Name](URL)
- [All Contributors](../../contributors)

## License

[MIT](LICENSE) © [OWNER](URL)
npm package: @marcreichel/alpine-autosize
Description: A simple AlpineJS plugin for autosizing textareas
Author: Marc Reichel
Latest version: 1.3.3

<h1 align="center">↕️ Alpine Autosize ↕️</h1>

<p align="center">
  A little <a href="https://alpinejs.dev">Alpine.js</a> plugin to automatically resize a <code>textarea</code> to fit its content.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-autosize">
    <img src="https://img.shields.io/github/v/tag/marcreichel/alpine-autosize?label=version" alt="version">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-autosize">
    <img src="https://img.badgesize.io/marcreichel/alpine-autosize/main/dist/alpine-autosize.js.svg?compression=gzip&color=green" alt="Build size">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-autosize">
    <img src="https://img.shields.io/npm/dt/@marcreichel/alpine-autosize" alt="downloads">
  </a>
  <a href="https://www.jsdelivr.com/package/npm/@marcreichel/alpine-autosize">
    <img src="https://data.jsdelivr.com/v1/package/npm/@marcreichel/alpine-autosize/badge?style=rounded" alt="JSDelivr">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-autosize">
    <img alt="GitHub" src="https://img.shields.io/github/license/marcreichel/alpine-autosize">
  </a>
  <a href="https://gitmoji.dev/">
    <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg">
  </a>
</p>

## 🚀 Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.min.js" defer></script>
```

### NPM

```shell
npm install @marcreichel/alpine-autosize
```

Add the `x-autosize` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import Autosize from '@marcreichel/alpine-autosize';

Alpine.plugin(Autosize);

Alpine.start();
```

## 🪄 Usage

To let the `textarea` automatically resize, add the `x-data` and `x-autosize` directives to the `<textarea>`.

```html
<textarea x-data x-autosize></textarea>
```

### ⏬ Additional height

To add additional height to the textarea - which might be necessary in some occasions - you can do so using the
"padding" modifier like so (only `px` values are supported):

```html
<textarea x-data x-autosize.10px></textarea>
```

This adds additional 10px to the textarea height. You can provide any integer which best suits your needs.

## 📄 License

Copyright (c) 2022 Marc Reichel and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @marcreichel/alpine-typewriter
Description: A simple AlpineJS plugin to create a typewriter effect
Author: Marc Reichel
Latest version: 1.2.1

<h1 align="center">⌨️ Alpine Typewriter ⌨️</h1>

<p align="center">
  An <a href="https://alpinejs.dev">Alpine.js</a> plugin to add a typewriter effect to any HTML element.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-typewriter">
    <img src="https://img.shields.io/github/v/tag/marcreichel/alpine-typewriter?label=version" alt="version">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-typewriter">
    <img src="https://img.badgesize.io/marcreichel/alpine-typewriter/main/dist/alpine-typewriter.min.js.svg?compression=gzip&color=green" alt="Build size">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-typewriter">
    <img src="https://img.shields.io/npm/dt/@marcreichel/alpine-typewriter" alt="downloads">
  </a>
  <a href="https://www.jsdelivr.com/package/npm/@marcreichel/alpine-typewriter">
    <img src="https://data.jsdelivr.com/v1/package/npm/@marcreichel/alpine-typewriter/badge?style=rounded" alt="JSDelivr">
  </a>
  <a href="https://www.npmjs.com/package/@marcreichel/alpine-typewriter">
    <img alt="GitHub" src="https://img.shields.io/github/license/marcreichel/alpine-typewriter">
  </a>
  <a href="https://gitmoji.dev/">
    <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg" alt="Gitmoji">
  </a>
</p>

![hero](examples/hero.gif)

## 🚀 Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter/dist/alpine-typewriter.min.js" defer></script>
```

### NPM

```shell
npm install @marcreichel/alpine-typewriter
```

Add the `x-typewriter` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import Typewriter from '@marcreichel/alpine-typewriter';

Alpine.plugin(Typewriter);

Alpine.start();
```

## 🪄 Usage

Simply add the `x-typewriter` directive to any HTML element and provide the texts which should be cycled through.

```html
<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter="texts"></span>
```

### Adjust the speed

By default, a text stays for 2 seconds before being swapped out. This behavior may be adjusted using a modifier like so:

```html
<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.5s="texts"></span>
```
or

```html
<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.3000ms="texts"></span>
```

### Add an animated cursor

To add a blinking cursor add the `cursor` modifier like so:

```html
<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.cursor="texts"></span>
```

## 📄 License

Copyright (c) 2023 Marc Reichel and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @marcreichel/angular-carousel
Description: A simple and lightweight Angular Carousel Component.
Author: Marc Reichel
Latest version: 3.0.1


# Angular Carousel

[![CodeFactor](https://www.codefactor.io/repository/github/marcreichel/angular-carousel/badge)](https://www.codefactor.io/repository/github/marcreichel/angular-carousel)
![version](https://img.shields.io/npm/v/@marcreichel/angular-carousel)
![downloads](https://img.shields.io/npm/dt/@marcreichel/angular-carousel)
![license](https://img.shields.io/npm/l/@marcreichel/angular-carousel)
[![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg)](https://gitmoji.dev)

A simple and lightweight Angular (12+) Carousel Component.


## Installation

Install `@marcreichel/angular-carousel` with npm:

```bash
npm install @marcreichel/angular-carousel --save
```

or with yarn:

```bash
yarn add @marcreichel/angular-carousel
```

## Documentation

You will find the full documentation on [the dedicated documentation site](https://marcreichel.dev/docs/angular-carousel).
npm package: @marcreichel/apple-tv-card
Description: An Apple TV Card with hover animation and parallax effect
Author: Marc Reichel
Latest version: 1.0.2

# Apple TV Card (with JavaScript and CSS)

[![CodeFactor](https://www.codefactor.io/repository/github/marcreichel/apple-tv-card/badge/main)](https://www.codefactor.io/repository/github/marcreichel/apple-tv-card/overview/main)
![version](https://img.shields.io/npm/v/apple-tv-card)
![downloads](https://img.shields.io/npm/dt/apple-tv-card)
![license](https://img.shields.io/npm/l/apple-tv-card)
[![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg)](https://gitmoji.dev)

An Apple TV Card with hover animation and parallax effect.


## Demo

![Animation](docs/demo.gif)

[Live-Demo](https://marcreichel.github.io/apple-tv-card/)


## Installation

### Via a package manager

#### NPM

```shell
npm install @marcreichel/apple-tv-card --save
```

#### yarn

```shell
yarn add @marcreichel/apple-tv-card
```

### Directly via CDN

Insert inside the head of your HTML:

```html
<link href="//unpkg.com/@marcreichel/apple-tv-card@latest/dist/main.css" rel="stylesheet">
<script src="//unpkg.com/@marcreichel/apple-tv-card@latest/dist/main.js" defer></script>
```

## Set up

> **Please note**: This step is only necessary when you used a package manager for installation.

### Require the JavaScript

```javascript
require('@marcreichel/apple-tv-card');
```

### Import the CSS

```css
@import "~@marcreichel/apple-tv-card/dist/main.css";
```

## Usage

Add the card to your HTML:

```html
<div class="apple-tv-card-container" style="width:300px;">
    <div class="apple-tv-card">
        <div class="content" style="background-image:url(...);">
            <!-- Any non-parallax content -->
        </div>
        <div class="parallax-content">
            <!-- Example -->
            <div style="width:5em;height:5em;border:1em dashed white;"></div>
            <!-- End: Example -->
        </div>
    </div>
    <div class="apple-tv-card-title">
        Your awesome card
    </div>
</div>
```


## Credits

- [@marcreichel](https://www.github.com/marcreichel)
- [All Contributors](https://github.com/marcreichel/apple-tv-card/contributors)


## Known Issues

- Card title not displayed correctly in Safari


## Contributing

Contributions are always welcome!
npm package: @marcreichel/tailwind-css-properties
Description: A Tailwind CSS plugin that exports theme colors as css custom properties.
Author: Marc Reichel
Latest version: 1.5.1

# Tailwind CSS Color Properties

![version](https://img.shields.io/npm/v/@marcreichel/tailwindcss-css-properties)
![npm bundle size](https://img.shields.io/bundlephobia/min/@marcreichel/tailwind-css-properties)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@marcreichel/tailwind-css-properties)
![downloads](https://img.shields.io/npm/dt/@marcreichel/tailwind-css-properties)
![license](https://img.shields.io/npm/l/@marcreichel/tailwind-css-properties)

A Tailwind CSS plugin that exports theme colors as css custom properties.

## Installing

```
npm install @marcreichel/tailwind-css-properties
```

or

```
yarn add @marcreichel/tailwind-css-properties
```

Require in your Tailwind config:

```javascript
module.exports = {
    /* ... */
    plugins: [
        require('@marcreichel/tailwind-css-properties')
    ]
}
```
npm package: @marcsaleiko/autocomplete
Description: Realizes a customizable autocomplete that only handles the autocomplete itself.
Author: Marc Saleiko
Latest version: 0.1.0

# Autocomplete

Realizes a customizable autocomplete that only handles the autocomplete itself.
The rest ist totally up to you. There are some configuration options and
three callbacks that let you customize every aspect of the autocomplete item
creation to the selection of an item or the appearance of an autocomplete item in the list.

Depends on jQuery. Work in progress.

 ## Initialization:
 Use window.Autocomplete.init({}); in your DOM ready function and maybe
 pass some configuration and override options.

 ## Example markup:
 ```
 <div class="js-autocomplete-group-trigger autocomplete-holder">
    <input type="text" name="autocomplete" />
    <div class="autocomplete-list js-autocomplete-list" autocomplete="off"></div>
 </div>
 ```
npm package: @marcsaleiko/flynav
Description: Display a flying navigation.
Author: Marc Saleiko
Latest version: 0.1.0

# Flynav
Display a flying navigation.

## Installation

Install via npm `npm install @marcsaleiko/flynav --save`. Depends on jQuery.

## Usage
Include file in your script file and run `Flynav.init();`. You may use the options below to 
override the base settings.

Further documentation will be added.

### Options

You may provide additional options and overrides via an object passed to the `init({})` 
method. Here is a list of all available options and their default values:

```javascript
Flynav.init({
    // Trigger selector fo the flynav
    flynavSelector: '.js-flynav',
    // Trigger the flynav open when the reference scroll top
    // reaches the windows scroll top.
    // If you choose cloneSource this reference will be cloned
    // into the flynav container (append)
    flynavReferenceSelector: '.js-flynav-reference',
    // Selector on which we place the flynavOpenClass
    stateToggleSelector: 'body',
    // Do you want to clone the flynav reference or cloneFindSelector
    // into the flynav container?
    cloneSource: false,
    // Clone just a part of the flynav container.
    // If you do not wish to clone the reference, you can
    // clone a subpart of the flynav here. We use the reference
    // if this is false
    flynavCloneFindSelector: false,
    // Classname we should place on the stateToggleSelector
    flynavOpenClass: 'flynav--open',
    // After how many pixels offset should the flynav open toggle
    flynavOffset: 1,
    // Shall we use the offset or fire immediately when the
    // reference comes into view
    useOffset: true,
});
```
npm package: @marcsaleiko/navigatie
Description: Helper tool for everyday navigation building.
Author: Marc Saleiko
Latest version: 0.1.2

# Navigatie
Helper tool for everyday navigation building.

## Installation

Install via npm `npm install @marcsaleiko/navigatie --save`. There are no dependencies, just plain vanilla javascript.

## Usage

Include file in your script file and run `Navigatie.init();`. You may use the options below

### Options

You may provide additional options and default overrides via an object passed to the `init` method. Here is a list of all available options and their default values:

```javascript
Navigatie.init({
    // Selector that triggers the main navigation. May be off canvas or plain
    // navigation burger for mobile. Ignore that if you only have a subnav.
    triggerSelector: '.js-menu-trigger',
    // Selector that triggers a subnavigation open.
    subnavTriggerSelector: '.js-submenu-trigger',
    // There will be a global point where we place the openClass
    // to indicate that the main navigation is open. Defaults to body
    placeOpenClassOnSelector: 'body',
    // This is the selector of the subnavigation itself. When the subnav
    // triggers, we look for the subnavParentSelector and after that inside
    // the subnavSelector. The subnav will receive openSubnavClass on open.
    subnavSelector: '.js-submenu',
    // When the subnav triggers, we look for a container parent element, we can place
    // the openSubnavParentClass on. May be the main nav item or any other parent of 
    // the subnav and subnav trigger.
    subnavParentSelector: '.js-menu-item',
    // The placeOpenClassOnSelector will receive this class on main navigation open
    openClass: 'navigation-open',
    // The subnavParentSelector will receive this class on subnavigation open
    openSubnavParentClass: 'submenu-open',
    // The subnavSelector will receive this class on subnavigation open
    openSubnavClass: 'submenu-open',
    /**
    * This callback will be triggered on each triggerSelector click.
    * @param {boolean} navigationOpen Is the main navigation open
    * @param {NodeList} trigger The main navigation trigger nodelist 
    */
    toggleCallback: function( navigationOpen, trigger ){},
    /**
    * This calback will be triggered on each subnavTriggerSelector click.
    * @param {boolean} subnavOpen Was this subnav opened or closed
    * @param {boolean} anySubnavOpen Is at least one subnav open
    * @param {boolean} navigationOpen Is the main navigation open
    * @param {Node} subnav The subnav that has been triggered
    * @param {Node} parent The parent container element which contains the subnav and the trigger
    * @param {NodeList} subnavTrigger The subnav trigger nodelist
    */
    toggleSubnavCallback: function( subnavOpen, anySubnavOpen, navigationOpen, subnav, parent, subnavTrigger ){},
});
```

You may also use `Navigatie.active();` to receive whether the module found at least a trigger or subnavTrigger. It indicates whether the app is somehow active and may respond to interaction.