open-index/open-npm huggingface dataset:
npm package: @ohpyupi/screenshotjs
Description: A Javascript library that helps capturing screenshot on web
Author: hoseong.a.lee@gmail.com
Latest version: 1.0.5

# ScreenshotJS
The module helps to take a screenshot in browsers.

## Demo
![Screenshot Demo Gif](./demo.gif)

## Installation
```bash
npm install html2canvas @ohpyupi/screenshotjs -S
```

## Methods
### capture(options) -> void
Allows users to select an area to be screenshotted.

#### Parameters
| Name               | Type              | Description                                                |
|--------------------|-------------------|------------------------------------------------------------|
| options.onComplete | (dataUrl) => void | A callback called when the area of screenshot is selected. |

### download(dataUrl, filename) -> void
Downloads an image dataUrl to the local drive.

#### Parameters
| Name     | Type   | Description                       |
|----------|--------|-----------------------------------|
| dataUrl  | string | Image data in data url format     |
| filename | string | The filename of image data        |

## License
MIT
npm package: @ohpz/esbuild-jest
Description: A Jest esbuild transformer.
Author: hannoeru <me@hanlee.co>
Latest version: 0.3.0

# esbuild-jest

A Jest transformer using esbuild

## Install

```bash
npm install -D @ohpz/esbuild-jest
```

Set `transform` TypeScript file to `@ohpz/esbuild-jest` inside `jest.config.js`

```json5
{
  "transform": {
    "^.+\\.tsx?$": "@ohpz/esbuild-jest"
  }
}
```

Specify esbuild options

```js
const esbuildOptions = {}

module.export = {
  transform: {
    "^.+\\.tsx?$": [
      "@ohpz/esbuild-jest",
      esbuildOptions
    ]
  }
}
```

## License

MIT License © 2021 [hannoeru](https://github.com/hannoeru)
npm package: @ohs/eslint-config
Description: Eslint config for @ohs projects
Author: Yaroslav Kiliba
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

### Deprecated in favor of 'multi-tools' like `kcd-scripts` that have almost everything a library author might need.
# eslint-config
Config for `@ohs`'s projects, based on `eslint-config-airbnb`, batteries included

## Install

```bash
$ npm i @ohs/eslint-config eslint
$ yarn add @ohs/eslint-config eslint
```

## Usage

```js
require('@ohs/eslint-config/patch');

module.exports = {
  extends: [
    '@ohs/eslint-config',
  ],
  parserOptions: { tsconfigRootDir: __dirname },
};
```
npm package: @ohs/use-progressive-image
Description: Progressive image loading for React
Author: Yaroslav Kiliba
Latest version: 2.0.1

# use-progressive-image

Hook for progressive image loading, alternative to [react-progressive-image](https://www.npmjs.com/package/react-progressive-image).

 - Supports `<img>` and `<picture>` with `<source>` elements.
 - If image is in browser's cache, `loading` will be immediatelly `false` in Chrome, Firefox, and Edge.
 - SSR: Returns `false` on the server, so the server returns image paths instead of placeholders because by the time js is loaded, parsed, and React initialized, most images would have already fully or at least partially loaded. If React is ready and an image is still loading, we have a mismatch and `loading` is going to be `true` on the client when that happens. If you want to prevent that, set `ssr` to `true`. But this option might not work in development if you're using webpack, probably because webpack dev environment is a little bit magical.
 - Written in TypeScript.

## Install

```bash
$ npm i @ohs/use-progressive-image
$ yarn add @ohs/use-progressive-image
```

## Signature
```tsx
function useProgressiveImage({
  img?: string | { sizes?: string; src?: string; srcSet?: string; };
  sources?: { sizes?: string; src?: string; srcSet?: string; type?: string; }[];
  ssr?: boolean; // set to true if it's an SSR app
  // returns `loading` and an `Error` event if failed to load
}): [boolean, Event | string | undefined] 
```

## Examples
### Simple

```tsx
import React, { useMemo } from 'react';
import useProgressiveImage from '@ohs/use-progressive-image';

export interface ImgProps {
  lqip?: string;
  src?: string;
}

const Img: React.FC<ImgProps> = ({ lqip, src }) => {
  const [loading] = useProgressiveImage({ img: src });

  return (
    <img src={loading ? lqip : src} />
  );
};
```
### Load avif image with a fallback

```tsx
import React, { useMemo } from 'react';
import useProgressiveImage from '@ohs/use-progressive-image';

export interface ImgProps {
  lqip?: string;
  src?: string;
  avif?: string;
}

const Img: React.FC<ImgProps> = ({ lqip, src, avif }) => {
  // It's recommended to memoize `sources` array, otherwise it will be deep 
  // compared with previous value on each rerender in `useProgressiveImage`
  const sources = useMemo(() => [{ 
    srcSet: avif, 
    type: 'image/avif' 
  }], [avif]);

  const [loading] = useProgressiveImage({ img: src, sources });

  return (
    <picture>
      {!loading && <source {...sources[0]} />}
      <img src={loading ? lqip : src} />
    </picture>
  );
};
```
npm package: @ohseesoftware/tailwind-config
Description: Tailwind config for Oh See Software projects.
Author: Oh See Software
Latest version: 2.2.0

# Oh See Software Tailwind Configuration

The standard TailwindCSS configuration for a Oh See Software project.

# Updating the configuration

Colors are managed in `index.js`. Each brand color is exported with a `-lighten` and a `-darken` suffix which alter the brightness of the color by 15%.

Colors will be available via `brand-${color}`, `brand-${color}-lighten`, and `brand-${color}-darken`.

Committing updates will run semantic release as part of the GitHub Actions script.