open-index/open-npm huggingface dataset:
npm package: @mdgbayly/react-textarea-autosize
Description: textarea component for React which grows with content
Author: Andrey Popp
Latest version: 3.3.3

# react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes.
A native React version of the popular [jQuery
Autosize](http://www.jacklmoore.com/autosize/)!

This module supports IE9 and above. PR welcome to add IE8 support.

```javascript
var Textarea = require('react-textarea-autosize');

React.renderComponent(
  <div>
    <Textarea></Textarea>
  </div>,
  document.getElementById('element'));
```

## Install

`npm install react-textarea-autosize`

## Demo

http://andreypopp.github.io/react-textarea-autosize/

## Development

To release patch, minor or major version:

    % make release-patch
    % make release-minor
    % make release-major

To publish release:

    % make publish
npm package: @mdgfox/array-extensions
Description: Lightweight TypeScript extensions for Array prototype: shuffle, random, and deep copy.
Author: Alex Khmelev
Latest version: 1.0.0

# @mdgfox/array-extensions

Lightweight TypeScript extensions for the Array prototype. Adds `shuffle`, `random`, and `randomDeepCopy` methods.

## Installation

```bash
npm install @mdgfox/array-extensions
```

## Usage
Import the package once at the entry point of your application to extend the global Array interface:
```ts
import '@mdgfox/array-extensions';
```
Then you can simply use it next way
```ts
const arr = [1, 2, 3, 4, 5];
// shuffle
console.log(arr.shuffle());         
// Get random element
console.log(arr.random());          
// Get random element (cloned copy)
console.log(arr.randomDeepCopy());
```

## API

### `.shuffle(): T[]`
Shuffles the array in place using the Fisher–Yates algorithm. Returns the same array instance for chaining.

### `.random(): T | undefined`
Returns a random element from the array by reference. Returns `undefined` if empty.

### `.randomDeepCopy(): T | undefined`
Returns a deep-cloned copy of a random element using `structuredClone` (with a JSON fallback).

## License
[MIT](LICENSE)
npm package: @mdgsf/createarray
Description: create arbitrary dimension array.
Author: MDGSF
Latest version: 1.0.2

# CreateArray

```
@brief CreateArray create arbitrary dimension array.
@params arbitrary numbers of parameters.
    one parameter: create one dimension array.
    two parameter: create two dimension array.
    ....
```

### Example 1

```
const CreateArray = require('@mdgsf/createarray');
const a = CreateArray();
console.log('a =', a); // a = []
```

### Example 2

```
const CreateArray = require('@mdgsf/createarray');
const a = CreateArray(3);
console.log('a =', a); // a = [ null, null, null ]
```

### Example 3

```
const CreateArray = require('@mdgsf/createarray');
const a = CreateArray(2, 3);
console.log('a =', a);
```

output:

```
a = [ [ null, null, null ], [ null, null, null ] ]
```

### Example 4

```
const CreateArray = require('@mdgsf/createarray');
const a = CreateArray(3, 4);
console.log(a);
```

output:

```
[
  [ null, null, null, null ],
  [ null, null, null, null ],
  [ null, null, null, null ]
]
```

### Example 5

```
const CreateArray = require('@mdgsf/createarray');
const a = CreateArray(2, 3, 4);
console.log(a);
```

output:

```
[
  [
    [ null, null, null, null ],
    [ null, null, null, null ],
    [ null, null, null, null ]
  ],
  [
    [ null, null, null, null ],
    [ null, null, null, null ],
    [ null, null, null, null ]
  ]
]
```
npm package: @mdhender/number-formatter
Description: A simple message queue for local development
Author: Michael D Henderson
Latest version: 0.0.2

# Number Formatter

A small library that adds commas to numbers

## Installation

  `npm install @mdhender/number-formatter`

## Usage

    var numFormatter = require('@mdhender/number-formatter');

    var formattedNum = numFormatter(35666);
  
  
  Output should be `35,666`


## Tests

  `npm test`

## Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
npm package: @mdhnpm/color-contrast-ratio-calculator
Description: Node module to calculate the contrast of two colors for accessibity based on Web Contenet Accessibility Guideline (WCAG).
Author: mydatahack
Latest version: 1.0.4

# color-contrast-ratio-calculator

Node module to calculate the contrast of two colors for accessibity based on Web Contenet Accessibility Guideline (WCAG).

## Example

`colorContrastRatioCalculator` takes two argument.
- foregroundColor: a hexadecimal string (with or without #) or an array of RBG.
- backgroundColor: a hexadecimal string (with or without #) or an array of RBG. 

```js
import { colorContrastRatioCalculator } from '@mdhnpm/color-contrast-ratio-calculator';

colorContrastRatioCalculator('11AA55', 'AA8811'); // return 1.11

colorContrastRatioCalculator('#E9FAF5', '#FFFFFF'); // return 1.08

colorContrastRatioCalculator([0, 0, 0], [255, 255, 255]); // return 21
```

## Color Contrast

As part of web accessibility requirements, we need to have the color contrast between background and foreground content (usually text) should be great enough to ensure legibility (see [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast))

WCAG 2.0 level AA requires a contrast ratio of at least `4.5:1` for normal text and `3:1` for large text. WCAG 2.1 requires a contrast ratio of at least `3:1` for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least `7:1` for normal text and `4.5:1` for large text.

Large text is defined as 14 point (typically `18.66px`) and bold or larger, or 18 point (typically `24px`) or larger.

Contrast ratio is calculated as `(L1 + 0.05) / (L2 + 0.05)` where
- L1 is the relative luminance of the lighter of the colors, and
- L2 is the relative luminance of the darker of the colors.

See Contrast Ration [here](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio)

According to WCAG, the relative luminance of a color for the sRGB colorspace is defined as `L = 0.2126 * R + 0.7152 * G + 0.0722 * B` where R, G and B are defined as:

- if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
- if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
- if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

- RsRGB = R8bit/255
- GsRGB = G8bit/255
- BsRGB = B8bit/255


See [here](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance) for the details.
npm package: @mdhnpm/react-cube-loading-spinner
Description: Configurable 3d cube loading spinner built with and for ReactJS
Author: mdh
Latest version: 2.1.1

# React Cube Loading Spinner

Super cool configurable cube loading spinner for react. There are 4 configurable options. With TypeScript support.

| props              | purpose                                                                                 |
| ------------------ | --------------------------------------------------------------------------------------- |
| mainColor          | Main color of the cube. It takes any CSS color values (color name, hex, rgb).           |
| secondaryColor     | Secondary color of the cube                                                             |
| spinnerInnerHeight | Height of the inner spinner in pixel. The dimension will be spinnerInnerHeight times 3. |
| spinnerSpeed       | Speed of the spinner rotation in second (e.g. 1.5).                                     |

## Usage

Import the module.

```tsx
import { CubeLoadingSpinner } from "@mdhnpm/cube-loading-spinner";
```

We can configure the spinner. Note that when `spinnerInnerHeight` is 9, the dimension of the cube will be `27 x 27 x 27px`.

```tsx
<CubeLoadingSpinner
  mainColor="black"
  secondaryColor="gray"
  spinnerInnerHeight={9}
  spinnerSpeed={1.5}
/>
```

The props are optional. If you don't pass any prop, you can get a default spinner.

```tsx
<CubeLoadingSpinner />
```

And this is what it looks like...

<img src="./gif/spinner.gif" alt="spinner gif"/>

Enjoy 🤟💀🤟
npm package: @mdhnpm/react-mdh-blog-components
Description: React components for MyDatahack blog site
Author: mdh
Latest version: 4.2.0

# react-mdh-blog-components

## In Progress...

React Components for MyDatahack blog site. Nothing much in it at the moment.

See what components are available [here](https://mydatahack.github.io/mdh-blog-components).

## Note

Make sure to use the correct node version (16.10.0)

```bash
nvm install 16.10.0
nvm alias default 16.10.0
npm install yarn --global
yarn install
```
npm package: @mdhnpm/rgb-hex-converter
Description: Convert RGV to hexadecimal and vice versa
Author: mdh
Latest version: 1.2.0

# rgb-hex-converter

Node module to convert RGV to Hexadecimal and vice versa.

Hexadecimal is a base 16 system (meaning each place value in the number is some power of 16). We use Hex codes to simplify binary representation. A Hex code can be any of these 16 digits: `0 1 2 3 4 5 6 7 8 9 A B C D E F`. To represent color, we use the format `#RRGGBB`. Each 2 digits will correspond to RGB color values.

The RGB model uses a value between `0` and `255` for each color for red, green and blue. Each RGB color value there is an equivalent Hex value.

For example, the color black is represented as `(255, 255, 255)` with RGB and `#FFFFFF` with Hex.

## When do you want to use it?

Whenever you need to convert RGV to Hexadecimal or vice versa.
## Examples

There are two functions: `convertRgbToHex` & `convertHexToRgb`.

```js
import { convertRgbToHex, convertHexToRgb } from '@mdhnpm/rgb-hex-converter';

```

`convertRgbToHex` will take three RGB values as input and returns string of Hex.

```js
convertRgbToHex(0, 255, 0); // returns '00ff00'
```

`convertHexToRgb` takes a string value of Hex (prefixed with or without #) and returns an array of RGB.

```js
convertHexToRgb('#00ff00'); // returns [0, 255, 0]

convertHexToRgb('fc41ef'); // returns [252, 65, 239]
```
npm package: @mdhnpm/wcag-contrast-checker
Description: A module to access the color contrast between background and foreground based on Web Contenet Accessibility Guideline (WCAG).
Author: mdh
Latest version: 1.1.0

# wcag-contrast-checker

A module to access the color contrast between background and foreground based on Web Contenet Accessibility Guideline (WCAG).

This tool takes two inputs (foreground and background color) and return the results according to the documentation [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

**Usage**

`wcagContrastChecker` takes two arguments:
- foregroundColor: a hexadecimal string (with or without #) or an array of RBG.
- backgroundColor: a hexadecimal string (with or without #) or an array of RBG.

```js
import { wcagContrastChecker } from '@mdhnpm/wcag-contrast-checker';

wcagContrastChecker('11AA55', 'AA8811');

wcagContrastChecker('#E9FAF5', '#FFFFFF');

wcagContrastChecker([0, 0, 0], [255, 255, 255]);
```

**Output**

It will return the result object to inform if the test passed for each criteria as below. The below example is when the ratio is 3.95.

```
expectedOutput: {
  regularText: {
    aa: false,
    aaa: false,
  },
  largeText: {
    aa: true,
    aaa: false,
  },
  uiComponent: {
    aa: true
  }
}
```
npm package: @mdi/components
Description: > Note this repo is for the Material Design Icons website. If you want components for your own project look here: > > - [React](https://github.com/Templarian/MaterialDesign-React/) > - [Web Component](https://github.com/Templarian/MaterialDesign-WebCom
Author: Austin Andrews
Latest version: 0.2.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Material Design Icons - Website Components

> Note this repo is for the Material Design Icons website. If you want components for your own project look here:
>
> - [React](https://github.com/Templarian/MaterialDesign-React/)
> - [Web Component](https://github.com/Templarian/MaterialDesign-WebComponent/)

The website is made of many components, view the `src/mdi` folder to see the source.

- [View the Components](https://templarian.github.io/@mdi/components/)

## Contribute to this Project

To run the application locally use the following NPM commands.

```bash
npm install
npm test
npm start
```

Open http://localhost:8080 (port could vary)

To build just the components.

```bash
npm run build
```

### Web Components

Web Components with a very basic wrapper. The only magic is...

- `@Prop() foo = 'Hello World`;
  - Calls `this.render()` on change.
- `@Part() $foo: HTMLDivElement;` = `<div part="foo"></div>`
  - `this.$part.innerText = 'Hello World!';`
- `@Local('default') foo;` Shorthand for localStorage.

Learn More: https://github.com/Templarian/Element