open-index/open-npm huggingface dataset:
npm package: @nanlabs/fp
Description: <!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->
Latest version: 0.4.8

<!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->

<div align="center">
<h1>Functional Programming tools</h1>

[Documentation][docs] |
[Contributing][contributing]

</div>
<div align="center">

[![Continious Integration][cibadge]][ciurl]
[![npm][npmversion]][npmurl]
[![npm][npmdownloads]][npmurl]
[![License: MIT][licensebadge]][licenseurl]

</div>

This library provides a set of tools to help you write functional code in TypeScript.
It includes tools for type guards, error handling, and more!

## Installation

```bash
npm install @nanlabs/fp
```

## Usage

The following example shows how some of the multiple tools provided by this library can be used.

You can find more examples in the [documentation][docs].

### Type Guards

The following example shows how to use Rule Sets to create type guards.
We can use `isType` to check if a value matches a Rule Set.

```ts
import { isString, isNumber, isType } from "@nanlabs/fp";

const userRuleSet = {
  username: isString,
  email: isString,
  age: isNumber,
};

const isUser = (value: unknown): value is User => isType(value, userRuleSet);

const user: unknown = { username: "John", email: "jonh@gmail.com", age: 30 };

if (isUser(user)) {
  // user is User
}
```

### Either and Error Handling

The following example shows how to use `Either` to handle errors.
We can use `isLeft` and `isRight` to check if an `Either` is `Left` or `Right`.

```ts
import { Either, left, right } from "@nanlabs/fp";

const div = (x: number): Either<Error, number> => {
  if (x === 0) {
    return left(new Error("Division by zero"));
  }

  return right(1 / x);
};

const divResult = div(0);

if (divResult.isLeft()) {
  // divResult is Left
  console.log(divResult.value.message);
}

if (divResult.isRight()) {
  // divResult is Right
  const result = divResult.value;
  console.log(result);
}
```

[docs]: https://nanlabs.github.io/nancy.js/
[contributing]: https://github.com/nanlabs/nancy.js/blob/main/CONTRIBUTING.md
[cibadge]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml/badge.svg
[npmversion]: https://img.shields.io/npm/v/@nanlabs/fp.svg?maxAge=2592000?style=plastic
[npmdownloads]: https://img.shields.io/npm/dm/@nanlabs/fp.svg?maxAge=2592000?style=plastic
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[ciurl]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml
[npmurl]: https://www.npmjs.com/package/@nanlabs/fp
[licenseurl]: https://github.com/nanlabs/nancy.js/blob/main/LICENSE
npm package: @nanlabs/questionnaire
Description: Made with create-react-library
Author: Kupuka-D
Latest version: 1.0.14

<!-- # questionnaire

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/questionnaire.svg)](https://www.npmjs.com/package/questionnaire) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save questionnaire
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'questionnaire'
import 'questionnaire/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [Kupuka-D](https://github.com/Kupuka-D) -->

## Install & run

```bash
npm install
npm start // for the library
cd example
npm start // for the app that use the library
```
npm package: @nanlabs/react-hooks
Description: <!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->
Latest version: 0.6.0

<!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->

<div align="center">
<h1>React Hooks</h1>

[Documentation][docs] |
[Contributing][contributing]

</div>
<div align="center">

[![Continious Integration][cibadge]][ciurl]
[![npm][npmversion]][npmurl]
[![npm][npmdownloads]][npmurl]
[![License: MIT][licensebadge]][licenseurl]

</div>

This package contains multiple hooks that can be used in your React application!

## Installation

```bash
npm install @nanlabs/react-hooks
```

## Usage

The following example shows how one of the multiple hooks provided by this library can be used.

In the example bellow we use `useDebounce` to debounce the value of an input.

You can find more examples in the [documentation][docs].

```ts
import React, { useState } from "react";
import { useDebounce } from "@nanlabs/react-hooks";

const Component = () => {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Debounced value: {debouncedValue}</p>
    </div>
  );
};
```

[docs]: https://nanlabs.github.io/nancy.js/
[contributing]: https://github.com/nanlabs/nancy.js/blob/main/CONTRIBUTING.md
[cibadge]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml/badge.svg
[npmversion]: https://img.shields.io/npm/v/@nanlabs/react-hooks.svg?maxAge=2592000?style=plastic
[npmdownloads]: https://img.shields.io/npm/dm/@nanlabs/react-hooks.svg?maxAge=2592000?style=plastic
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[ciurl]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml
[npmurl]: https://www.npmjs.com/package/@nanlabs/react-hooks
[licenseurl]: https://github.com/nanlabs/nancy.js/blob/main/LICENSE
npm package: @nanlabs/react-thirdparty
Description: <!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->
Latest version: 0.4.0

<!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->

<div align="center">
<h1>React Third Party integrations</h1>

[Documentation][docs] |
[Contributing][contributing]

</div>
<div align="center">

[![Continious Integration][cibadge]][ciurl]
[![npm][npmversion]][npmurl]
[![npm][npmdownloads]][npmurl]
[![License: MIT][licensebadge]][licenseurl]

</div>

This library provides a set of React components that can be used in any React application.
It provides integrations with third party libraries like Google ReCaptcha and more!

This library uses [@nanlabs/thirdparty](https://www.npmjs.com/package/@nanlabs/thirdparty) under the hood.
You can check it out if you want to use the integrations in a non-React application.

## Installation

```bash
npm install @nanlabs/react-thirdparty
```

## Usage

The following example shows how one of the multiple integrations provided by this library can be used.

In the example bellow we use `GoogleReCaptchaProvider` and `useGoogleReCaptcha` to integrate reCAPTCHA v3 in our application.

You can find more examples in the [documentation][docs].

```tsx
import React, { useState } from "react";
import {
  GoogleReCaptchaProvider,
  useGoogleReCaptcha,
} from "@nanlabs/react-thirdparty";

// Your component that wants to use reCAPTCHA
const YourReCaptchaComponent = () => {
  const [token, setToken] = useState();

  return (
    <GoogleReCaptcha
      action="login_page"
      onVerify={(token) => {
        setToken(token);
      }}
    />
  );
};

// Use the provider in your app to configure the reCAPTCHA library
const App = () => (
  <GoogleReCaptchaProvider reCaptchaKey="YOUR_RECAPTCHA_KEY">
    <YourReCaptchaComponent />
  </GoogleReCaptchaProvider>
);
```

[docs]: https://nanlabs.github.io/nancy.js/
[contributing]: https://github.com/nanlabs/nancy.js/blob/main/CONTRIBUTING.md
[cibadge]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml/badge.svg
[npmversion]: https://img.shields.io/npm/v/@nanlabs/react-thirdparty.svg?maxAge=2592000?style=plastic
[npmdownloads]: https://img.shields.io/npm/dm/@nanlabs/react-thirdparty.svg?maxAge=2592000?style=plastic
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[ciurl]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml
[npmurl]: https://www.npmjs.com/package/@nanlabs/react-thirdparty
[licenseurl]: https://github.com/nanlabs/nancy.js/blob/main/LICENSE
npm package: @nanlabs/react-ui
Description: <!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->
Latest version: 0.4.9

<!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->

<div align="center">
<h1>React Components</h1>

[Documentation][docs] |
[Contributing][contributing]

</div>
<div align="center">

[![Continious Integration][cibadge]][ciurl]
[![npm][npmversion]][npmurl]
[![npm][npmdownloads]][npmurl]
[![License: MIT][licensebadge]][licenseurl]

</div>

This library provides a set of React components that can be used in any React application.

## Installation

```bash
npm install @nanlabs/react-ui
```

## Usage

The following example shows how one of the multiple hooks provided by this library can be used.

In the example bellow we use the `Image` component to render an image with a list of fallbacks and retrying on error.

You can find more examples in the [documentation][docs].

```tsx
import React from "react";
import { Image } from "@nanlabs/react-ui";

const Component = () => (
  <Image
    src="https://picsum.photos/400"
    fallback={["https://picsum.photos/300", "https://picsum.photos/200"]}
    maxRetry={3}
    retryDelay={1000}
    initialTimeout={1000}
    decoding="async"
    loading="lazy"
    className="async-image"
    onLoad={() => console.log("Image loaded!")}
    style={{
      width: "300px",
      objectFit: "cover",
    }}
  />
);
```

[docs]: https://nanlabs.github.io/nancy.js/
[contributing]: https://github.com/nanlabs/nancy.js/blob/main/CONTRIBUTING.md
[cibadge]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml/badge.svg
[npmversion]: https://img.shields.io/npm/v/@nanlabs/react-ui.svg?maxAge=2592000?style=plastic
[npmdownloads]: https://img.shields.io/npm/dm/@nanlabs/react-ui.svg?maxAge=2592000?style=plastic
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[ciurl]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml
[npmurl]: https://www.npmjs.com/package/@nanlabs/react-ui
[licenseurl]: https://github.com/nanlabs/nancy.js/blob/main/LICENSE
npm package: @nanlabs/thirdparty
Description: <!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->
Latest version: 0.4.0

<!--lint disable double-link awesome-heading awesome-git-repo-age awesome-toc-->

<div align="center">
<h1>Third Party integrations</h1>

[Documentation][docs] |
[Contributing][contributing]

</div>
<div align="center">

[![Continious Integration][cibadge]][ciurl]
[![npm][npmversion]][npmurl]
[![npm][npmdownloads]][npmurl]
[![License: MIT][licensebadge]][licenseurl]

</div>

This library provides a set of tools that can be used in any web application.
It provides integrations with third party libraries like Google ReCaptcha and more!

You can check our [React library](https://www.npmjs.com/package/@nanlabs/react-thirdparty) if you want to use the integrations in a React application.

## Installation

```bash
npm install @nanlabs/thirdparty
```

## Usage

The following example shows how one of the multiple integrations provided by this library can be used.

In the example bellow we use `GoogleReCaptchaProvider` and `useGoogleReCaptcha` to integrate reCAPTCHA v3 in our application.

You can find more examples in the [documentation][docs].

```tsx
import React, { useState } from "react";
import { injectGoogleReCaptchaScript } from "@nanlabs/thirdparty";

injectGoogleReCaptchaScript({
  reCaptchaKey: "YOUR_RECAPTCHA_KEY",
  scriptId: "recaptcha-script",
});

window.onload = () => {
  const reCaptcha = window.grecaptcha;
  reCaptcha.ready(() => {
    reCaptcha
      .execute("YOUR_RECAPTCHA_KEY", { action: "login_page" })
      .then((token) => {
        // Do something with the token
      });
  });
};
```

[docs]: https://nanlabs.github.io/nancy.js/
[contributing]: https://github.com/nanlabs/nancy.js/blob/main/CONTRIBUTING.md
[cibadge]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml/badge.svg
[npmversion]: https://img.shields.io/npm/v/@nanlabs/thirdparty.svg?maxAge=2592000?style=plastic
[npmdownloads]: https://img.shields.io/npm/dm/@nanlabs/thirdparty.svg?maxAge=2592000?style=plastic
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[ciurl]: https://github.com/nanlabs/nancy.js/actions/workflows/ci.yml
[npmurl]: https://www.npmjs.com/package/@nanlabs/thirdparty
[licenseurl]: https://github.com/nanlabs/nancy.js/blob/main/LICENSE
npm package: @nanmo/search-params-tools
Description: provides searchParams management tools
Author: nanmo
Latest version: 1.0.3

SearchParmas Tools 提供了 SearchParams 便捷操作方法

##### addSearchParams 添加 SearchParams Api

```javascript
addSearchParams('a=1&b=2', { c: 3, d: 4 })
// return 'a=1&b=2&c=3&d=4'
```

##### delSearchParams 删除 SearchParams Api

```javascript
delSearchParams('a=1&b=2&c=3&d=4', ['c', 'd'])
// return 'a=1&b=2'
```

##### getSearchParams 返回 SearchParams 的 JSON 对象的 Api

```javascript
delSearchParams('a=1&b=2')
// return {a: 1, b: 2}
```
npm package: @nanmo/vue-component-library
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.0.3

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
npm package: @nanmutop/koa-cli
Description: This is a koa initialization project
Author: nanmu
Latest version: 0.1.0

# Koa-CLI

**打造一款开箱即用的 Koa 定制框架，使用 Sequelize 操作数据库**

## 安装方法

1. **安装依赖**
    ```bash
    npm install
    ```

2. **运行**
    ```bash
    npm run dev
    ```