open-index/open-npm huggingface dataset:
npm package: @ftge/use-arena-screensaver
Description: Use an are.na channel to create a screensaver when your website becomes idle.
Author: Ryan Sheehan
Latest version: 1.3.8

# useArenaScreensaver 🌐

A simple hook that will overlay a screensaver of images from an [are.na](https://www.are.na/) 🌐 channel when users of your site become idle.


# Usage
### Installation  🌱
```
npm i use-arena-screensaver
```
or
```
yarn add use-arena-screensaver
```
### Importing
```
import useArenaScreensaver from 'use-arena-screensaver'
```

### Options
| option  | type | description | example |
| ------------- | ------------- | ------------- | ------------- |
| `timeout`  | number  | Time a user needs to be idle on site before screensaver becomes active  | `1000 * 60 * 2` |
| `timeBetween`  | number  | Time between images appearing once screensaver is active  | `500` |
| `arenaSlug`  | string  | Slug of the are.na channel you want the screensaver to pull from | `things-i-saved-to-my-camera-roll` |
| `backgroundOpacity`  | number  | how dark the background tint should be | `0.4` |
### Example
Using this [channel](https://www.are.na/ryan-sheehan/rocks-xxbfv_ntyau) that has the slug `rocks-xxbfv_ntyau`
```jsx
import useArenaScreensaver from 'use-arena-screensaver';

function App() {
  useArenaScreensaver({ arenaSlug: "rocks-xxbfv_ntyau", timeout: 1000 * 60 * 5 });
  return (
    ...
  );
}
```
![Screen Shot 2022-05-16 at 4 48 55 PM](https://user-images.githubusercontent.com/26094593/168680411-b0080f52-18e3-40d9-8807-dcf0f20b2079.png)
npm package: @fthebaud/reducer-logger
Description: Simple logger for reducer functions
Author: fthebaud
Latest version: 1.0.3

# Reducer Logger

A simple typescript logger for reducer functions, inspired by [redux-logger](https://github.com/LogRocket/redux-logger).

Provides a diff of the previous state / next state via [deep-diff](https://github.com/flitbit/diff).

![screenshot of reducer logger](screenshot.png)

## Installation

```bash
$ npm i --save @fthebaud/reducer-logger
# or
$ yarn add @fthebaud/reducer-logger
```

## Usage

Just wrapp the reducer using the wrapReducer function.

Second parameter is an optional configuration object.

```js
import { wrapReducer } from '@fthebaud/reducer-logger';

const reducer = (state: State, action: Action): State => {
  // Reducer code
};

export const reducerWithLogs = wrapReducer<State, Action>(
    reducer,
    {
      disabled: process.env.NODE_ENV === 'production',
      displayName: 'reducer #1',
    }
);

```

## Options

| Name        | type    | default |
| ----------- | ------- | ------- |
| disabled    | boolean | false   |
| displayName | string  | ''      |
npm package: @ftheriault/animatedsprite
Description: Utility class to animate a sprite using a sprite sheet
Author: Frédéric Thériault
Latest version: 1.0.6

# AnimatedSprite

Helper class to animate your sprites.

## Installation

````
$ npm install --save @ftheriault/animatedsprite
````

### Simple example

For this to work, it must be imported from a JavaScript file and used in an HTML file. A valid image path must be specified.

````javascript
import TiledImage from '@ftheriault/animatedsprite';

let columnCount = 9;        // in the sprite sheet
let rowCount = 4;           // in the sprite sheet
let changeTileDelay = 100;  // msec. Passing from a cell to the other
let loopHorizontally = true;// Loop horizontally or vertically?
let scale = 1.0;            // Default size, could be scaled down or up

let node = document.createElement("div");
document.body.append(node);
let tiledImage = new TiledImage("images/skeleton-walk.png", columnCount, rowCount, changeTileDelay, loopHorizontally, scale, node);

tiledImage.changeRow(3);    // Which row to display in the sprite sheet
tiledImage.changeMinMaxInterval(0, 8); // Columns to loop over. In this case, from column 0 to 8

let posX = 50;

const tick = () => {
    posX += 0.5;
    tiledImage.tick(posX, y);

    window.requestAnimationFrame(tick);
}

tick();

````

### Other examples

See `index.html` for examples using Canvas and DOM.

## Credits
Thanks to wulax for the sprite sheet !
http://opengameart.org/content/lpc-medieval-fantasy-character-sprites

## Creating sprite sheets

To create a sprite sheet with fixed width/height cells, you can use this tool : https://apps-de-cours.com/utils/sprite-sheet-creator

github: https://github.com/ftheriault/SpriteSheetGridHelper
npm package: @ftjs/antd
Description: ![NPM Version](https://img.shields.io/npm/v/@ftjs/antd) ![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)
Latest version: 3.2.1

# @ftjs/antd

![NPM Version](https://img.shields.io/npm/v/@ftjs/antd)
![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)

---

ant-design-vue 适配器

## 文档

请查看 [@ftjs/antd 文档](https://ftjs-docs.yhs.ink/antd/)。

## 许可证

[MIT](https://github.com/yuhengshen/ftjs/blob/main/LICENSE)
npm package: @ftjs/core
Description: ![NPM Version](https://img.shields.io/npm/v/@ftjs/core) ![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)
Latest version: 2.0.1

# @ftjs/antd

![NPM Version](https://img.shields.io/npm/v/@ftjs/core)
![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)

---

核心模块

## 文档

请查看 [@ftjs/core 文档](https://ftjs-docs.yhs.ink/@ftjs/core/introduction.html)。

## License

[MIT](https://github.com/yuhengshen/ftjs/blob/main/LICENSE)
npm package: @ftjs/element
Description: ![NPM Version](https://img.shields.io/npm/v/@ftjs/element) ![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)
Latest version: 3.0.0

# @ftjs/element

![NPM Version](https://img.shields.io/npm/v/@ftjs/element)
![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)

---

element-plus 适配器

## 文档

请查看 [@ftjs/element 文档](https://ftjs-docs.yhs.ink/element/)。

## 许可证

[MIT](https://github.com/yuhengshen/ftjs/blob/main/LICENSE)
npm package: @ftjs/tdesign
Description: ![NPM Version](https://img.shields.io/npm/v/@ftjs/tdesign) ![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)
Latest version: 3.1.0

# @ftjs/tdesign

![NPM Version](https://img.shields.io/npm/v/@ftjs/tdesign)
![GitHub License](https://img.shields.io/github/license/yuhengshen/ftjs)

---

tdesign-vue-next 适配器

## 文档

请查看 [@ftjs/tdesign 文档](https://ftjs-docs.yhs.ink/tdesign/)。

## 许可证

[MIT](https://github.com/yuhengshen/ftjs/blob/main/LICENSE)