open-index/open-npm huggingface dataset:
npm package: @plasmicapp/pro-card
Description: @plasmicapp/pro-card
Latest version: 2.5.0

# @plasmicapp/pro-card

> @plasmicapp/pro-card.

See our website [@plasmicapp/pro-card](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-card
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-card
```
npm package: @plasmicapp/pro-descriptions
Description: @plasmicapp/pro-descriptions
Latest version: 2.4.0

# @plasmicapp/pro-descriptions

> Advanced description list component, providing a more convenient and faster solution to build description lists.

See our website [@plasmicapp/pro-descriptions](https://procomponent.ant.design/) for more information.

ProDescriptions was created to solve the problem of having to write a lot of sample code for Descriptions in a project, so it encapsulates a lot of common logic in it. Writing a Descriptions in React inevitably requires defining some of the same properties. So ProDescriptions by default encapsulates the logic of requesting network, columns display.

For example, if ProDescriptions encapsulates the behavior of the request network, ProDescriptions will bring the data in props.params into the request by default, and if the interface happens to be the same as our definition, it will be very easy to implement a query.

```tsx | pure
import request from 'umi-request';

const fetchData = (params) =>
  request<{
    data: T{};
  }>('https://proapi.azurewebsites.net/github/issues', {
    params,
  });

const keyWords = "Ant Design"

<ProDescriptions<T,U> request={fetchData} />;
```

We agree that request has one parameter and `params` will take its own `params` in props. The type is as follows:

```tsx | pure
(params: U) => RequestData;
```

There are also conventions for ProDescriptions with the results of the request back, of the following type.

```tsx | pure
interface RequestData {
  data: Datum{};
  success: boolean;
}
```

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-descriptions
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-descriptions
```
npm package: @plasmicapp/pro-field
Description: 原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。
Author: chenshuai2144
Latest version: 2.10.0

# @plasmicapp/pro-field

See our website [@plasmicapp/pro-field](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-field
```

or using yarn:

```bash
$ yarn add  @plasmicapp/pro-field
```
npm package: @plasmicapp/pro-layout
Description: @plasmicapp/pro-layout
Latest version: 7.15.0

# @plasmicapp/pro-layout

![](https://gw.alipayobjects.com/zos/antfincdn/HSeAGqaEwn/1586504755352-479bf47d-97a6-4080-afed-d38ffe905e57.png)

ProLayout provides a standard, yet flexible, middle and backend layout, with one-click layout switching and automatic menu generation. It can be used with PageContainer to automatically generate breadcrumbs, page headers, and provide a low-cost solution to access the footer toolbar.

## When to use

ProLayout can be used to reduce layout costs when content needs to be carried on a page.

### Use with umi plugins

ProLayout works best with umi. umi automatically injects the routes from config.ts into the configured layout for us, so we don't have to write the menus by hand.

ProLayout extends umi's router configuration, adding name, icon, locale, hideInMenu, hideChildrenInMenu and other configurations, so that it is easier to generate menus in one place. The data format is as follows.

```ts | pure
export interface MenuDataItem {
  /** @name submenu */
  children?: MenuDataItem[];
  /** @name Hide child nodes in the menu */
  hideChildrenInMenu?: boolean;
  /** @name hideSelf and children in menu */
  hideInMenu?: boolean;
  /** @name Icon of the menu */
  icon?: React.ReactNode;
  /** @name Internationalization key for custom menus */
  locale?: string | false;
  /** @name The name of the menu */
  name?: string;
  /** @name is used to calibrate the selected value, default is path */
  key?: string;
  /** @name disable menu option */
  disabled?: boolean;
  /** @name path */
  path?: string;
  /**
   * When this node is selected, the node of parentKeys is also selected
   *
   * @name custom parent node
   */
  parentKeys?: string[];
  /** @name hides itself and elevates child nodes to its level */
  flatMenu?: boolean;

  [key: string]: any;
}
```

ProLayout will automatically select the menu based on `location.pathname` and automatically generate the corresponding breadcrumbs. If you don't want to use it, you can configure `selectedKeys` and `openKeys` yourself for controlled configuration.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-layout
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-layout
```
npm package: @plasmicapp/pro-list
Description: 🏆 Use Ant Design List like a Pro!
Latest version: 2.5.0

<h1 align="center">@plasmicapp/pro-list</h1>

<div align="center">

🏆 Use Ant Design List like a Pro!

</div>

# ProList (高级列表)

ProList 在 antd 的 list 支持了一些功能，比如 多选，展开等功能，使用体验贴近 table。

## 何时使用

在完成一个标准的列表时即可使用。

## API

### ProList

ProList 与 antd 的 [List](https://ant.design/components/list-cn/) 相比，主要增加了 rowSelection 和 expandable 来支持选中与筛选

| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| rowSelection | 与 antd 相同的[配置](https://ant.design/components/table-cn/#rowSelection) | object \|boolean | false |
| expandable | 与 antd 相同的[配置](https://ant.design/components/table-cn/#expandable) | object \| false | - |
| showActions | 何时展示 actions | 'hover' \| 'always' | always |
| rowKey | 行的 key，一般是行 id | string \| (row,index)=>string | "id" |
| renderItem | 现在的 renderItem 需要返回 ProList.Item 的 props，而不是 dom | ItemProps | - |
| listRenderItem | 这是 antd 的 renderItem 的别名 | (row,index)=> Node | - |

### ProList.Item

如果你的 dataSource 包含 children，我们会将其打平传入到 renderItem 中，但是包含 children 的项会转化了 group 的样式，只支持 title 和 actions 的属性。

| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| type | 列表项的预设样式 | new \| top | - |
| title | 列表项的主标题 | ReactNode | - |
| subTitle | 列表项的副标题 | ReactNode | - |
| checkbox | 列表的选择框 | React.ReactNode | - |
| loading | 列表项是否在加载中 | React.ReactNode | - |
| avatar | 列表项的头像 | AvatarProps \| string | - |
| actions | 操作列表项 | React.ReactNode[] | - |
| description | 列表项的描述，与 title 不在一行 | React.ReactNode[] | - |
| expandedRowClassName | 额外展开的 css | string | - |
| expand | 列表项是否展开 | boolean | - |
| onExpand | 列表项展开收起的回调 | (expand: boolean) => void | - |
| expandable | 列表项展开配置 | [object](https://ant.design/components/table-cn/#expandable) | - |
npm package: @plasmicapp/pro-provider
Description: @plasmicapp/pro-provider
Latest version: 2.11.0

# @plasmicapp/pro-provider

> @plasmicapp/pro-provider.

See our website [@plasmicapp/pro-provider](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-provider
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-provider
```
npm package: @plasmicapp/pro-skeleton
Description: @plasmicapp/pro-skeleton
Latest version: 2.1.6

# @plasmicapp/pro-skeleton

> @plasmicapp/pro-skeleton.

See our website [@plasmicapp/pro-skeleton](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-skeleton
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-skeleton
```
npm package: @plasmicapp/pro-utils
Description: @plasmicapp/pro-utils
Latest version: 2.12.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @plasmicapp/pro-utils

> @plasmicapp/pro-utils.

See our website [@plasmicapp/pro-utils](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-utils
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-utils
```
npm package: @plasmicapp/query
Description: This is a mini, isomorphic, _component-level_ data-fetching library, built around [swr](https://github.com/vercel/swr). It lets you fetch data in a React environment client-side or server-side. On the server, it lets you prefetch data from any component, 
Author: Chung Wu
Latest version: 0.1.84

# @plasmicapp/query

## Purpose

This is a mini, isomorphic, _component-level_ data-fetching library, built around [swr](https://github.com/vercel/swr).
It lets you fetch data in a React environment client-side or server-side.
On the server, it lets you prefetch data from any component, Suspense-style.

Normally in frameworks like Next.js pages router, you cannot couple your data fetches with your components--you need to fetch at the page-level with `getStaticProps`/`getServerSideProps`.
Component-level fetches would happen client-side instead of server-side (ultimately via a `useEffect` or similar).

Paired with @plasmicapp/prepass, this library allows you to express data fetches directly in your components while prefetching all data on the server-side.

## Usage with Plasmic

Learn more about how this can be used with Plasmic specifically in the docs: https://docs.plasmic.app/learn/data-code-components/.

## Notes

- This library is NOT for React Server Components, only for server rendering environments like Next.js pages router.
- This library is NOT specific to Plasmic in any way.