open-index/open-npm huggingface dataset:
npm package: @ricokahler/exec
Description: Whenever I write a build script, I always write a little helper that wraps spawn so instead I made a small package namespaced by my name.
Author: Rico Kahler
Latest version: 1.1.0

# @ricokahler/exec

Whenever I write a build script, I always write a little helper that wraps spawn so instead I made a small package namespaced by my name.

## Usage

```js
const exec = require('@ricokahler/exec');

async function main() {
  // only runs the command, doesn't return anything
  await exec('echo hello world!'):
}
```

stdout is redirected to `process.stdout` and stderr to `process.stderr`

that's it!
npm package: @ricokahler/jsonmatch-js
Description: [go-jsonmatch](https://github.com/sanity-io/go-jsonmatch) compiled to JS via GopherJS
Author: Rico Kahler
Latest version: 1.0.0

# JSONMatch JS

The following code was compiled from [go-jsonmatch](https://github.com/sanity-io/go-jsonmatch) using [gopherjs 1.17](https://github.com/gopherjs/gopherjs/tree/1.17.0%2Bgo1.17.1)

> Note: this package is was created primarily for use with [`jsonmatch-patch`](https://github.com/ricokahler/jsonmatch-patch)

## Disclaimer: the bundle is huge. A pure JS implementation would be much much better.

The following entry point was used:

```go
package main

import "github.com/gopherjs/gopherjs/js"
import "github.com/sanity-io/go-jsonmatch"

func MatchWrapper(path string, data interface{}, set interface{}) interface{}  {
	match, err1 := jsonmatch.Match(path, data)
	if (err1 != nil) {
		return nil
	}
	result, err2 := match.Set(set)
	if (err2 != nil) {
		return nil
	}
	return result
}


func main() {
	js.Module.Set("exports", map[string]interface{}{
		"JSONMatch": MatchWrapper,
	})
}
```
npm package: @ricokahler/jsonmatch-patch
Description: JSONMatch Patch utils
Author: Rico Kahler
Latest version: 1.0.0

# JSONMatch Patch ᐧ [![NPM Release](https://badgen.net/npm/v/@ricokahler/jsonmatch-patch)](https://www.npmjs.com/package/@ricokahler/jsonmatch-patch) [![GitHub status checks](https://badgen.net/github/checks/ricokahler/jsonmatch-patch)](https://github.com/ricokahler/jsonmatch-patch/actions) [![codecov](https://codecov.io/gh/ricokahler/jsonmatch-patch/branch/main/graph/badge.svg?token=d4iU4rkUTL)](https://codecov.io/gh/ricokahler/jsonmatch-patch) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

> A collection of patch utils that utilize [JSONMatch](https://github.com/sanity-io/go-jsonmatch)

> 🚨 Disclaimer: the bundle size is huge
>
> This package depends on [go-jsonmatch](https://github.com/sanity-io/go-jsonmatch) [compiled to javascript](https://github.com/ricokahler/jsonmatch-js) via GopherJS.

See here for more info on [JSONMatch](https://www.sanity.io/docs/json-match).

## Install

```
npm install @ricokahler/jsonmatch-patch
```

## API

[Check out the automated docs site](https://jsonmatch-patch.vercel.app/)
npm package: @ricokahler/pool
Description: like `Promise.all` but you can specify how many concurrent tasks you want at once
Author: Rico Kahler
Latest version: 1.2.0

# @ricokahler/pool · [![codecov](https://codecov.io/gh/ricokahler/pool/branch/master/graph/badge.svg)](https://codecov.io/gh/ricokahler/pool) [![github status checks](https://badgen.net/github/checks/ricokahler/pool)](https://github.com/ricokahler/pool/actions) [![bundlephobia](https://badgen.net/bundlephobia/minzip/@ricokahler/pool)](https://bundlephobia.com/result?p=@ricokahler/pool) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

Pool is like `Promise.all` but you can specify how many concurrent tasks you want at once.

[Well tested.](https://codecov.io/gh/ricokahler/pool) | [Zero dependencies and small size.](https://bundlephobia.com/result?p=@ricokahler/pool)

```
npm i @ricokahler/pool
```

```js
import pool from '@ricokahler/pool';

async function blah() {
  const texts = await pool({
    collection: [1, 2, 3, 4, 5],
    maxConcurrency: 2, // only fetch two pages at a time
    task: async (n) => {
      const response = await fetch(`/go/download/something/${n}`);
      const text = await response.text();
      return text;
    },
  });

  console.log(texts); // an array of the 5 items downloaded
}
```

`maxConcurrency` is optional. If omitted it will default to just using `Promise.all` with no max concurrency.
npm package: @ricokahler/promise-suspender
Description: Experimental package
Author: Rico Kahler
Latest version: 1.0.1

# @ricokahler/promise-suspender

This is an **experimental** package that plays around with the idea of using suspense for promises.

```js
import { Suspense } from 'react';
import { createPromiseSuspender } from '@ricokahler/promise-suspender';
import { somethingAsync } from '../';

const usePromise = createPromiseSuspender();

function MySuspendingComponent({ foo }) {
  const value = usePromise(async () => {
    const { data } = await somethingAsync(foo, bar);
    return data;
  }, [foo, bar]); // 👈 Note: these have to be strings

  return <>{value}</>;
}

function Parent() {
  return (
    <Suspense fallback={<>Loading...</>}>
      <MySuspendingComponent />
    </Suspense>
  );
}
```
npm package: @ricokahler/react-mounting-transition
Description: `react-mounting-transition` is a simple lib to help you add transitions to components you dynamically mount to the DOM
Author: Rico Kahler
Latest version: 1.0.1

# React Mounting Transition

> `react-mounting-transition` is a simple lib to help you add transitions to components you dynamically mount to the DOM

> ⚠️ this lib is still in development and needs a bit of polish

## Why is this necessary?

Certain elements are better dynamically added to the DOM on-demand. A good example of this would be a modal.

1. When the modal is opened, it's best to create a brand new containing div and add it to the DOM to avoid z-index issues.
2. For performance reasons, it's good to add the modal elements only when the modal is open to reduce the amount of elements on the first paint.

However, when mounting components dynamically to the DOM, it's hard to add transitions because you have to add different class names at different states of the transition while keeping the component mounted until the transition is finished.

You can think of this lib as a simpler alternative to `react-transition-group` with one specific use case.

## Installation

```
npm i @ricokahler/react-mounting-transition
```

### Usage

```tsx
import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
import MountingTransition from '@ricokahler/mounting-transition';

interface Props {
  open: boolean;
  onClose: () => void;
  className?: React.ReactNode;
  children: React.ReactNode;
}

function Modal({ className, children, open, onClose }: Props) {
  const handleMount = async () => {
    // do something useful like handle focus
  };

  const handleUnmount = async () => {
    // do something useful like handle focus
  };

  return (
    <MountingTransition
      mounted={open}
      portal={{ containerClass: 'modal__container' }}
      timeout={250}
      onMount={handleMount}
      onUnmount={handleUnmount}
    >
      {({ active }) => (
        <>
          <div
            className={classNames('modal__backdrop', {
              'modal__backdrop--active': active,
            })}
            onClick={onClose}
          />
          <div
            aria-modal="true"
            className={classNames(className, 'modal', {
              'modal--active': active,
            })}
          >
            {children}
          </div>
        </>
      )}
    </MountingTransition>
  );
}

export default Modal;
```

```css
.modal__container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
}

.modal__backdrop {
  opacity: 0;
  transition: opacity 250ms;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal__backdrop--active {
  opacity: 1;
}

.modal {
  width: 640px;
  max-width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 250ms;
  margin: auto;
  transform: translateY(100%);
}

.modal--active {
  opacity: 1;
  transform: translateY(0);
}
```
npm package: @ricokahler/react-redux
Description: Official React bindings for Redux
Author: Dan Abramov
Latest version: 7.0.0-rico.3

React Redux
=========================

Official React bindings for [Redux](https://github.com/reduxjs/redux).  
Performant and flexible.

[![build status](https://img.shields.io/travis/reduxjs/react-redux/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/react-redux) [![npm version](https://img.shields.io/npm/v/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
[![npm downloads](https://img.shields.io/npm/dm/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
[![redux channel on discord](https://img.shields.io/badge/discord-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)


## Installation

React Redux requires **React 16.4 or later.**

```
npm install --save react-redux
```

This assumes that you’re using [npm](http://npmjs.com/) package manager 
with a module bundler like [Webpack](https://webpack.js.org/) or 
[Browserify](http://browserify.org/) to consume [CommonJS 
modules](https://webpack.js.org/api/module-methods/#commonjs).

If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We *don’t* recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).

## React Native

As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run `npm ls react` and make sure you don’t have a duplicate React installation in your `node_modules`. We recommend that you use `npm@3.x` which is better at avoiding these kinds of issues.

If you are on an older version of React Native, you’ll need to keep using [React Redux 3.x branch and documentation](https://github.com/reduxjs/react-redux/tree/v3.1.0) because of [this problem](https://github.com/facebook/react-native/issues/2985).

## Documentation

The React Redux docs are now published at **https://react-redux.js.org** .

We're currently expanding and rewriting our docs content - check back soon for more updates!

## How Does It Work?

We do a deep dive on how React Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).  
Enjoy!

## License

MIT
npm package: @ricokahler/sanity-ui-test
Description: The Sanity UI components.
Author: Sanity.io
Latest version: 0.36.8

# @sanity/ui

The Sanity UI components.

```sh
npm install @sanity/ui

# Install peer dependencies
npm install react react-dom styled-components
```

[![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)

## Usage

```jsx
import {Button, studioTheme, ThemeProvider} from '@sanity/ui'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <ThemeProvider theme={studioTheme}>
    <Button text="Hello, world" />
  </ThemeProvider>,
  document.getElementById('root')
)
```

## License

MIT-licensed. See LICENSE.
npm package: @ricons/antd
Description: React SVG icon components integrated from [`ant-design-icons`](https://github.com/ant-design/ant-design-icons)
Author: 07akioni
Latest version: 0.13.0

# @ricons/antd

React SVG icon components integrated from [`ant-design-icons`](https://github.com/ant-design/ant-design-icons)

A part of [`xicons`](https://github.com/07akioni/xicons) project.