open-index/open-npm huggingface dataset:
npm package: @studiokeywi/play-confetti
Description: Shower the screen with faux confetti. Creates a canvas element to render confetti above the rest of the document.
Author: studioKeywi
Latest version: 0.0.2

# Confetti Thrower

Shower the screen with faux confetti. Creates a canvas element to render confetti above the rest of the document. Automatically resets after confetti has left screen, or when `init()` is called while confetti is actively falling.

## Simple Usage

```html
<html>
  <head>
    <script type="module">
      import buildConfetti from 'https://cdn.jsdelivr.net/gh/studiokeywi/play/packages/confetti/dist/index.js';

      const { init, render } = buildConfetti();

      // init() generates new confetti; render() begins animation
      document.querySelector('#confetti').addEventListener('click', () => {
        init();
        render();
      });
    </script>
  </head>
  <body>
    <button type="button" id="confetti">Confetti Time!</button>
  </body>
</html>
```

## Configuration

```javascript
const confettiConfig = {
  colors:       String[], // default: ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'turquoise']
  count:        Number,   // default: 300
  drag:         Number,   // default: 0.075
  gravity:      Number,   // default: 0.25
  holidays:     Boolean,  // default: true
  termVelocity: Number,   // default: 5
};
```
npm package: @studiokeywi/play-konami
Description: Unlock the retro power of the Konami Code on your websites! Creates an event listener that handles detection of keyboard inputs and executes a provided payload function if the user inputs the Konami Code correctly.
Author: studioKeywi
Latest version: 0.0.2

# Konami Code

Unlock the retro power of the Konami Code on your websites! Creates an event listener that handles detection of keyboard inputs and executes a provided payload function if the user inputs the Konami Code correctly.

This version of the code substitutes keyboard arrows for the directional pad. It also requires "Enter/Return" (as the start button) as the last key to execute the payload function, and supports optional "2 Player" mode, where "Shift" (select) is the next to last input.

<small>Konami is &trade; by the Konami Corporation and is in no way affiliated with studioKeywi. The use of the phrase "Konami Code" refers to a sequence of button inputs introduced by the game Gradius (&reg; by Konami) and popularized by the game Contra (&trade; by Konami).</small>

## Simple Usage

```html
<html>
  <head>
    <script type="module">
      import buildKonami from 'https://cdn.jsdelivr.net/gh/studiokeywi/play/konami/index.js';

      const payload = () => alert('You did it!');
      const { load } = buildKonami({ payload });

      // Use load() to begin Konami Code detection on the current page
      document.querySelector('#konami').addEventListener('click', () => {
        load();
      });
    </script>
  </head>
  <body>
    <button type="button" id="konami">Enable Konami Detection</button>
  </body>
</html>
```

## Configuration

```js
const konamiConfig = {
  once: Boolean, // default: true
  payload: Function, // default: konami => console.log('payload', konami)
  secondPlayer: Boolean, // default: false
};
```

## Advanced Usage

The payload function provided to the builder will be executed with access to the `konami.load()` and `konami.unload()` functions via the first parameter. This allows more custom behavior in enabling/disabling the Konami Code detection

```js
import buildKonami from 'https://cdn.jsdelivr.net/gh/studiokeywi/play/packages/konami/dist/index.jds';

// Example: Builds a Konami Code detector that executes in "2P mode" a single time by default, or repeats if the user agrees
buildKonami({
  payload: konami => confirm('Re-enable this konami code payload?') && konami.load(),
  secondPlayer: true,
}).load(); // Attach immediately
```
npm package: @studiokico/react-native-stroke-text
Description: React Native Stroke Text (New Arch Only)
Author: studiokico
Latest version: 0.1.2

# @studiokico/react-native-stroke-text

React Native Stroke Text (New Arch Only)

## Installation


```sh
npm install @studiokico/react-native-stroke-text
```


## Usage


```js
import React from "react";
import { StrokeText } from "@studiokico/react-native-stroke-text";
import { View } from "react-native";

export default function Screen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <StrokeText
        text="Test"
        fontSize={50}
        color="#000000"
        strokeColor="#c334eb"
        strokeWidth={20}
        fontFamily="Nunito-Black"
      />
    </View>
  );
}

```

### Props

The following table outlines the props available for the `StrokeText` component:

| Prop            | Type    | Description                                                     |
|-----------------|---------|-----------------------------------------------------------------|
| `text`          | string  | The text content you want to display.                           |
| `fontSize`      | number  | Size of the text font, defining how large the text will be.     |
| `color`         | string  | Color of the text, can use any valid color format.              |
| `strokeColor`   | string  | Color of the stroke (outline) around the text.                  |
| `strokeWidth`   | number  | Width of the stroke, determining the thickness of the outline.  |
| `fontFamily`    | string  | Font family for the text, should match available project fonts. |
| `align`         | string  | Text alignment (default: `center`)                              |
| `numberOfLines` | number  | Number of lines (default: `0`)                                  |
| `ellipsis`      | boolean | Ellipsis (...) (default: `false`)                               |
| `width`         | number  | Text width to enable ellipsis (default: `undefined`)            |

## Ellipsis

```jsx
<StrokeText
  text="Lorem ipsum"
    width={150}
    ellipsis={true}
    numberOfLines={1}
  fontSize={32}
  color="#FFFFFF"
  strokeColor="#000000"
  strokeWidth={2}
  fontFamily="Nunito-Black"
  align="center"
/>

```

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @studiokloek/pixi-texturepacker
Description: Pack sprites for PixiJS using TexturePacker CLI.
Author: Martijn Swart
Latest version: 1.3.3

# pixi-texturepacker
Pack sprites for PixiJS using TexturePacker CLI.

# Installation
```
npm i @studiokloek/pixi-texturepacker --save-dev
```

# Usage
Create a `asset.json` file in the root of your project, like the one below:

```
{
  "sprites": {
    "sourceDirectory" : "./assets/sprites", 
    "targetDirectory" : "./converted/sprites/",
    "scriptDirectory" : "./script/app/assets/",
    "watch" : true,
    "watchDelay" : 2000,
    "directories": [
      "world/background"
      "world/player",
      "hud"
    ]
  }
}
```

# Requirements
A installation of TexturePacker CLI with a valid licence is required.

# Under development
This module is currently under development and not ready for production.
npm package: @studiokloek/sounds-packer
Description: Tool to pack sounds for usage in projects.
Author: Martijn Swart
Latest version: 1.5.0

# sounds-packer
Packs sounds for using in our current project setup. Right now built for internal use, maybe usefull for the world later...

# Installation
```
npm i @studiokloek/sounds-packer --save-dev
```

# Usage
Create a `asset.json` file in the root of your project, like the one below:

```
{
  "sounds": {
    "sourceDirectory" : "./assets/sounds", 
    "targetDirectory" : "./converted/sounds/",
    "scriptDirectory" : "./script/app/sounds/",
    "watch" : true,
    "watchDelay" : 2000,
    "directories": [
      "scenes",
      "world/player",
      "hud"
    ]
  }
}
```

# Under development
This module is currently under development and not ready for production.
npm package: @studiokloek/vite-react-config
Description: Base Vite config for usage in our React projects.
Author: Martijn Swart
Latest version: 0.2.12

# vite-react-config
Externalize our vitejs react config setup, so we can use it in multiple projects. Right now built for internal use, maybe useful for the world later...

# Installation
```
npm i @studiokloek/vite-react-config --save-dev
```

# Usage
```
npm run kloek-development
npm run kloek-build --empty-output-dir --base "https://example.com/test" 
```
npm package: @studiolabs/react-native-live-stream
Description: a react-native module for live stream play and publish, support ios and android platform
Author: studioLabs
Latest version: 1.0.4

# react-native-live-stream
[![npm](https://img.shields.io/npm/v/react-native-live-stream.svg?style=flat-square)](https://www.npmjs.com/package/react-native-live-stream)

a react-native module for live stream play and publish

## ChangeLog

v1.0.1
1. fix readme

v1.0.0
1. initial release


## Installation
### Using npm

    npm install react-native-live-stream --save
    react-native link react-native-live-stream

### Using yarn
    yarn add react-native-live-stream
    react-native link react-native-live-stream

## After Installation
### Android

android/build.gradle
```
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        
        // Add this section
        maven { 
            url 'https://jitpack.io' 
        }
    }
}
```

### iOS
1. Add framework search path

In Xcode, project ```Build Settings``` find ```Framework search path```, 
add ```$(PROJECT_DIR)/../node_modules/react-native-live-stream/ios/libs``` to it.

2. Add framework

drag ```node_modules/react-native-live-stream/ios/libs/NodeMediaClient.framework``` to Xcode ```frameworks``` folder，select ```create folder references``` then OK.

## LivePlayer

### Feature
Protocol: RTMP/RTMPT/RTMPE/RTSP/HLS/HTTP(S)-FLV
Video codec: H.264, H.265,FLV, VP6, MPEG4
Audio codec: AAC, MP3, SPEEX, NELLYMOSER, ADPCM_SWF, G.711

### Usage

```
import {LivePlayer} from "react-native-live-stream";

<LivePlayer source={{uri:"rtmp://live.hkstv.hk.lxdns.com/live/hks"}}}
   ref={(ref) => {
       this.player = ref
   }}
   style={styles.video}
   paused={false}
   muted={false}
   bufferTime={300}
   maxBufferTime={1000}
   resizeMode={"contain"}
   onLoading={()=>{}}
   onLoad={()=>{}}
   onEnd={()=>{}}
/>
```
npm package: @studiolambda/query
Description: Lightweight, isomorphic and framework agnostic asynchronous data management for modern UIs
Author: Erik C. Forés
Latest version: 1.5.7

# Lambda Query

> Lightweight asynchronous data management

Lambda Query is a library created to manage asynchronous data on your code. This is generally used when you have to fetch data asynchronously for a given resource. Lambda Query allows you to manage this data by using an internal cache. It is very similar to how vercel's swr work. Lambda Query is also build to support arbitrary cache and event system, making it possible to create your own implementations.

## Documentation

Find out about the project and discover the features at the [Documentation](https://erik.cat/blog/query-docs/)

## Installation

```
npm i @studiolambda/query
```
npm package: @studiolambda/router
Description: Lightweight, isomorphic and framework agnostic router for modern UIs
Author: Erik C. Forés
Latest version: 0.1.0

# Lambda Router

> Lightweight, isomorphic and framework agnostic router for modern UIs

Lambda Router is a client-side routing library designed for single-page applications. It provides a core URL pattern matcher that works in any JavaScript environment, plus a full-featured React integration with components, hooks, and navigation management.

## Documentation

Find out about the project and discover the features at the [Documentation](https://lambda.studio/router/getting-started/)

## Installation

```
npm i @studiolambda/router
```
npm package: @studiolh/strapi-provider-upload-cos
Description: Tencent Cloud COS provider for strapi upload
Author: Kuma Li
Latest version: 1.0.1

# Strapi-Provider-Upload-COS

A tencent cos provider plugin for strapi.

[COS Node.js SDK](https://cloud.tencent.com/document/product/436/8629)

[Region](https://cloud.tencent.com/document/product/436/6224)
npm package: @studiometa/browserslist-config
Description: A shareable Browserslist configuration
Author: Studio Meta
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Browserslists config

[![NPM Version](https://img.shields.io/npm/v/@studiometa/browserslist-config.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/browserslist-config)

> A shareable Browserlist configuration.

## Installation

Install the package via NPM:

```bash
npm install --save-dev @studiometa/browserslist-config
```

## Usage

Extend the configuration in your project's `package.json` file:

```json
{
  "browserslist": [
    "extends @studiometa/browserslist-config"
  ]
}
```

See the [documentation on shareable configuration](https://github.com/browserslist/browserslist#shareable-configs) for more information.

The exported configuration matches the following:

```
> 0.2%
last 4 versions
not dead
node >= 10
```

If you need to add support for Internet Explorer 10, you can add it to your project's `package.json` file:

```json
{
  "browserslist": [
    "extends @studiometa/browserslist-config",
    "IE 10"
  ]
}
```