open-index/open-npm huggingface dataset:
npm package: @leeyeh/use-resource
Latest version: 1.1.1

# useResource 


A set of simple utilities for declarative async resource fetching.

![npm](https://flat.badgen.net/npm/v/@leeyeh/use-resource)
![bundle size](https://flat.badgen.net/bundlephobia/minzip/@leeyeh/use-resource)
![code cov](https://flat.badgen.net/codecov/c/github/leeyeh/use-resource)

## Features

- 🧾 Declarative, intuitive and minimal core API
- ⚛ Atomic, composable enhancement hooks
- 🔌 Protocol agnostic
- 💪 Written in TypeScript
- 🌲 Small size (~1KB gzipped) and tree-shaking ready

## Install

```bash
npm install @leeyeh/use-resource
```

## Example

First, create a hook for `fetch`:
```tsx
import { createResourceHook } from '@leeyeh/use-resource';

async function fetchJSON<T>(...args: Parameters<typeof fetch>) {
  return (await (await fetch(...args)).json()) as T;
}

const useFetch = createResourceHook(fetchJSON);
```

use `useFetch` in the `Clock` component:

```tsx
const Clock = () => {
  const [data, { error, loading, reload }] = useFetch<{ datetime: string }>([
    "https://worldtimeapi.org/api/timezone/etc/utc"
  ]);
  return (
    <div>
      <p>Current Time:</p>
      <p>
        {loading && "Loading..."}
        {error && error.message}
        {data && data.datetime}
      </p>
      <button onClick={reload}>Reload</button>
    </div>
  );
};
```
[![Edit use-resource-prototype](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-resource-prototype-i5wys?fontsize=14&hidenavigation=1&theme=dark&view=preview)

## Advanced usage

Currently there is an introduction available in Chinese:

[《用 React Hook 的风格加载数据》](https://www.notion.so/React-Hook-076214bf3d0d48b59220e9f702d9b879)

🚧 We are working on the translation.
npm package: @leeyuze/eslint-plugin-u
Description: u team eslint
Author: luca
Latest version: 2.0.0

# eslint-plugin-u

U 团队 ESLint 插件

## Installation

```sh
npm install @leeyuze/eslint-plugin-u --save-dev
```

## Usage

### 方式一：使用推荐配置（推荐）

在 `eslint.config.mjs` 中使用预设配置，一键启用所有规则：

```js
import pluginU from "@leeyuze/eslint-plugin-u";

export default [
  pluginU.configs.recommended,
];
```

### 方式二：手动配置规则

```js
import pluginU from "@leeyuze/eslint-plugin-u";

export default [
  {
    plugins: {
      u: pluginU,
    },
    rules: {
      // 用 switch 代替 else if
      "u/max-if-else": "warn",
      // 函数首字母必须大写, 允许 component 为小写
      "u/capital-function-name": ["warn", ["component"]],
      // enum 类型名称必须以 Enum 结尾
      "u/enum-end-names-with-enum": "warn",
    },
  },
];
```

## Configurations

| 配置名 | 描述 |
| ------ | ---- |
| `recommended` | 启用所有推荐规则（warn 级别） |

## Rules

| 规则名 | 描述 |
| ------ | ---- |
| [capital-function-name](docs/rules/capital-function-name.md) | 函数名首字母必须大写 |
| [enum-end-names-with-enum](docs/rules/enum-end-names-with-enum.md) | TypeScript Enum 类型命名必须以 "Enum" 结尾 |
| [max-if-else](docs/rules/max-if-else.md) | 多个 else if 时建议使用 switch 语句 |

## License

MIT
npm package: @lefapps/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 0.0.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @lefapps/translations-server
Description: Companion package for fetching remote content for @lefapps/translations
Author: LEF
Latest version: 4.0.2

# Translations Server (@lefapps)

This package provides building blocks for an Apollo backend to use in sync with the `@lefapps/translations` package.

## Schema

Add the typedefs and resolvers to your set:

```JS
import { makeExecutableSchema } from 'graphql-tools'
import merge from 'lodash/merge'
import {
  typedefs as Translation,
  resolvers as translationResolver
} from '@lefapps/translations-server'

const schema = makeExecutableSchema({
  typeDefs: [Translation],
  resolvers: translationResolver
})
```

## Translator

Create an object with the following methods: `find`, `findOne`, `update`. In the example below, `TRANSLATIONS` is a fictive interface to connect to your database, adapt accordingly!

```JS
const translator = {
  findOne: async ({ _id, ...query }) => await TRANSLATIONS.getOne({ _id, ...query }),
  find: async ({ query }) => await TRANSLATIONS.getAll(query),
  update: async ({ _id }, changedFields) => (
    await TRANSLATIONS.upsert(
      { _id }, // selector
      changedFields, // fields to set/update
      { upsert: true } // IMPORTANT!
    )
  )
}
```

## Apollo Server

Provide the transaltor object through the context of the Apollo Server:

```JS
import { ApolloServer } from 'apollo-server'

const server = new ApolloServer({
  schema, // see above
  context: () => ({ translator })
})
```
npm package: @lefe-1/vue2-render
Description: json/schema to UI/Page used vue2
Author: gavincly@163.com
Latest version: 0.3.0

# vue2-playground

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @leffot/form-controls
Description: A library of React components to use with Formik forms.
Author: leffot
Latest version: 1.5.0

# form-controls

## Install

```bash
npm install --save @leffot/form-controls
```

## Usage

```jsx
import { Formik, Form } from 'formik'
import { FormRow, TextInput } from '@leffot/form-controls'

function Example() {
    return (
        <Formik initialValues={{ emailAddress: '' }}>
            {() => (
                <Form>
                    <FormRow>
                        <TextInput
                            id='emailAddress'
                            label='Email'
                            name='emailAddress'
                            placeholder='you@example.com'
                            type='email'
                        />
                    </FormRow>
                </Form>
            )}
        </Formik>
    )
}
```

## License

MIT © [leffot](https://github.com/leffot)