open-index/open-npm huggingface dataset:
npm package: @hauvo/react-native-360-image-viewer
Description: The 360 image viewer for react native
Author: hauvo
Latest version: 2.0.0

react-native-360-image-viewer
===

Inspired by [https://github.com/scaleflex/js-cloudimage-360-view](https://github.com/scaleflex/js-cloudimage-360-view)

![Sample](example/example.gif)

Images credit: [https://www.cloudimage.io/](https://www.cloudimage.io/)

## Installation

```bash
yarn add @hauvo/react-native-360-image-viewer

or

npm install @hauvo/react-native-360-image-viewer --save
```

Please file an issue if you have any trouble!


## Usage

See [https://github.com/phuochau/react-native-360-image-viewer/blob/master/example/App.js](https://github.com/phuochau/react-native-360-image-viewer/blob/master/example/App.js)

## Properties
option | Info
------ | ----
srcset | Array of images. The image index should follow the ascending rotation. If you provide more images, the animation will be smoother. 
width | Width of image 
height | height of image 

## License

MIT
npm package: @hauxir/absinthe-socket-graphiql
Description: Socket GraphiQL Utilities
Author: Mauro Titimoli
Latest version: 1.0.1

# @absinthe/socket-graphiql

> Socket GraphiQL Utilities

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<!-- END doctoc -->

- [Installation](#installation)
  - [Using npm](#using-npm)
  - [Using yarn](#using-yarn)
- [API](#api)
  - [createFetcher](#createfetcher)
    - [Parameters](#parameters)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

### Using [npm](https://docs.npmjs.com/cli/npm)

    $ npm install --save phoenix @absinthe/socket-graphiql

### Using [yarn](https://yarnpkg.com)

    $ yarn add phoenix @absinthe/socket-graphiql

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### createFetcher

Creates a Fetcher using the given arguments

#### Parameters

-   `apiUrl` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `subscriptionsClient` **SubscriptionClient** 
-   `subscriptionSentMessage` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

## License

[MIT](LICENSE.txt) :copyright: Jumpn Limited.
npm package: @hauxir/phaser3-planck
Description: a phaser plugin for the planckjs box2d port
Author: notchris
Latest version: 1.2.3

# 🍎 Phaser3 Planck Physics Plugin
This plugin integrates the [Planck.js](http://piqnt.com/planck.js/) (Based on [Box2d](http://box2d.org/documentation/)) physics engine with [Phaser3](https://phaser.io/phaser3), allowing for advanced collision detection and dynamic body types. This plugin is still in development, please feel free to submit a PR or issue to help us improve this integration.

## Features
* ⭐ Support for Planck bodies (Box, Circle, Edge, Polygon).
* ⭐ Continuous Collision Detection (CCD) for bodies with 'Bullet' property.
* ⭐ Distance Joints, Revolute Joints
* ⭐ ...and more!

## Installation

You can install the latest version of **phaser3-planck** via npm or yarn.
```
npm install -S phaser3-planck
```
or...
```
yarn add phaser3-planck
```

## Usage
### Setup

First, import the package and update your global game configuration to include the plugin.

```js
import PhaserPlanck from 'phaser3-planck'
```
```js
const  config = {
	type:  Phaser.AUTO,
	width:  800,
	height:  600,
	plugins: {
		scene: [{
			key:  'PhaserPlanck',
			plugin:  PhaserPlanck,
			mapping:  'planck'
		}]
	},
	physics: {
		planck: {
			gravity: {
				x:  0,
				y:  3
			},
			scaleFactor: 30,
			debug: false
		}
	},
	scene: []
};

new  Phaser.Game(config);
```

### Creating Bodies

You can create different bodies in your scene using the following syntax:
```js
// Box
this.planck.add.box(400, 100, 30, 30)
// Circle
this.planck.add.circle(300, 20, 10)
// Edge (Line)
this.planck.add.edge(200, 300, 600, 300)
// Polygon
this.planck.add.polygon(340, 100, [[0, 0], [0, 70], [50, 100]])
```

### Configuring Bodies
The central Body class that all bodies extend, provides similar API methods / properties to Planck. A list of these properties / methods is listed below.

``` TODO ```

## Status
#### Bodies
| Type | Status |
|--|--|
| Box | ✔️ |
| Circle | ✔️ |
| Edge | ✔️ |
| Polygon | ✔️ |

#### Joints
| Type | Status |
|--|--|
| Distance | ✔️ |
| Friction |  |
| Gear |  |
| Motor |  |
| Mouse |  |
| Prismatic |  |
| Pulley |  |
| Revolute | ✔️ |
| Rope |  |
| Weld |  |
| Wheel |  |

## Contributing
Please feel free to post a PR / issue, we are looking for contributors to help with this effort. Thanks!

*You are welcome to contact me on:*
* Discord: **notchris#4207**
* IRC (Freenode): **notchris**
npm package: @hauxir/react-twitch-embed-video
Description: Allows you to easily embed a twitch video in your ReactJS application
Author: Erik Guzman
Latest version: 2.0.2

# React Twitch Embed Video

[![npm version](https://badge.fury.io/js/react-twitch-embed-video.svg)](https://badge.fury.io/js/react-twitch-embed-video)

Your solution to embeding the Twitch video player in your ReactJS application

https://talk2megooseman.github.io/react-twitch-embed-video/

## Installation

yarn | npm
---- | ---
`yarn add react-twitch-embed-video` | `npm install react-twitch-embed-video`

## Usage

Visit the github page for lives examples and documentation: https://talk2megooseman.github.io/react-twitch-embed-video/


```
import ReactTwitchEmbedVideo from "react-twitch-embed-video"
.
.
.

<ReactTwitchEmbedVideo channel="talk2megooseman" />
```

## Version 2 Notes

### Updates/Changes
- Refactor all code to use React Hooks instead of a class based component.
- Lowest version of React supported is now 16.8 (version React Hooks was introduced in)
- Removed onUserLogin, it appears Twitch stopped supporting this all together based off the docs
- Added targetId property for defining mutiple video players
- `onPlayerReady` renamed to `onReady`
- `onVideoPlay` renamed to `onPlay`

### Breaking Changes
In version one I was mistakenly using `targetClass` prop for populating the `id` attribute for the Twitch Player. So I created a new prop called `targetId` to use to define more then one Twitch Player on your page. `targetClass` now properly sets the class for the player for proper styling.
If you were one of the users the was creating more then on Twitch player on your page, just switch from using `targetClass` to `targetId` and things should still work properly.
If you're using `onPlayerReady` or `onVideoPlay`, make sure to rename them to the new prop names.

## Development

### Usage

1. Install modules
    > yarn

2. Check **_package.json_** so that the information is correct.
3. Start stroybook and start coding!
    > yarn start

4. Bundle with `yarn build`
5. To test if it works correctly in another project you can use npm `npm install -S ../react-twitch-embed-video` Note the relative path

#### Extra
* If you want to run eslint:
    > yarn lint

* If you want to automatically fix lint problems run :
    > yarn lint-fix

Commands
----
- `yarn`
- `yarn build`
- `yarn start`
- `yarn release`
- `yarn lint`
- `yarn lint-fix`
npm package: @hauzzz/jupiter-swap
Description: A package for Jupiter swap functionality
Latest version: 1.0.0

# jupiter-swap

A package for Jupiter swap functionality. This packages expose JupiterSwap class that can be used to get a quote and swap transaction.

TODO:

1. supported jito tips
2. support swap to different destination wallet
3. support interact with RPC provider.

## Installation

```bash
npm install @hauzzz/jupiter-swap
```

## Usage

```typescript
import { JupiterSwap } from '@hauzzz/jupiter-swap';

// Your usage example here
```

## Development

```bash
# Install dependencies
pnpm install

# Build the package
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

# Format code
pnpm format
```

## License

MIT
npm package: @havaem/tailwindcss-havaem
Description: Havaem's TailwindCSS plugin, providing additional utilities and components.
Latest version: 0.0.8

# @havaem/tailwindcss-havaem

A Tailwind CSS plugin that provides a set of layout utilities and custom variants for the [Havaem](https://havaem.com) design system.

## Installation

Install the plugin from npm:

```sh
npm i -D @havaem/tailwindcss-havaem
```

Then add the plugin to your main `style.css` file:

```diff
  @import "tailwindcss";
+ @plugin "@havaem/tailwindcss-havaem";
```

If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('@havaem/tailwindcss-havaem'),
        // ...
    ],
}
```

## Features

-   **Variants**:

    -   `hocus`: Applies styles on hover or focus (`:hover`, `:focus`)
    -   `inverted-colors`: Targets media with inverted colors
    -   `not-first`: Targets elements that are not the first child
    -   `not-last`: Targets elements that are not the last child
    -   `fullscreen`: Targets elements in fullscreen mode

-   **Utilities**:
    -   `.flex-center`, `.flex-center-x`, `.flex-center-y`
    -   `.inline-flex-center`, `.inline-flex-center-x`, `.inline-flex-center-y`
    -   `.absolute-center`, `.absolute-center-x`, `.absolute-center-y`

### Layout Utilities

-   **`.flex-center`**  
    Centers content both vertically and horizontally using `display: flex; align-items: center; justify-content: center;`.

-   **`.flex-center-x`**  
    Centers content horizontally only (`display: flex; justify-content: center;`).

-   **`.flex-center-y`**  
    Centers content vertically only (`display: flex; align-items: center;`).

-   **`.inline-flex-center`**  
    Same as `.flex-center` but uses `display: inline-flex;`.

-   **`.inline-flex-center-x`**  
    Same as `.flex-center-x` but uses `display: inline-flex;`.

-   **`.inline-flex-center-y`**  
    Same as `.flex-center-y` but uses `display: inline-flex;`.

-   **`.absolute-center`**  
    Absolutely positions the element at the center of its parent (`position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);`).

-   **`.absolute-center-x`**  
    Absolutely positions the element at the horizontal center (`position: absolute; left: 50%; transform: translateX(-50%);`).

-   **`.absolute-center-y`**  
    Absolutely positions the element at the vertical center (`position: absolute; top: 50%; transform: translateY(-50%);`).

```html
<div class="flex-center"></div>
<div class="flex-center-x"></div>
<div class="flex-center-y"></div>
<div class="inline-flex-center"></div>
<div class="inline-flex-center-x"></div>
<div class="inline-flex-center-y"></div>
<div class="absolute-center"></div>
<div class="absolute-center-x"></div>
<div class="absolute-center-y"></div>
```