@4so-fourseasons/react-hoc-spinners 中文文档教程

发布于 7年前 浏览 17 项目主页 更新于 3年前

构建状态覆盖状态npm version可维护性JavaScript 风格指南样式:styled-components

 Githubapi docs

react-hoc-spinners

react-hoc-spinners 是一个用于 React 项目的简单加载微调器库。

Installation

npm i --save @4so-fourseasons/react-hoc-spinners

Usage

有关每个组件/功能的详细信息,请查看我们的 API

注意:您可以使用每个相应组件/函数的命名导入,也可以使用带点符号的默认导入。

Default use case

在大多数情况下,您需要使用提供的 makeWithLoadingSpinner 工厂函数。 这为您提供了一个高阶组件,您可以使用它来包装您的 只要提供的条件为真,组件就会带有加载微调器。

Example

import { makeWithLoadingIndicator } from '@4so-fourseasons/react-hoc-spinners'

import MyComponent from '<some-path>/MyComponent'

const withLoadingIndicator = makeWithLoadingIndicator({
    condition: ({ loading } => loading
})

// Export wrapped component
export default withLoadingIndicator(MyComponent)

Spinner without HOC

如果您想自己实现所有逻辑,也可以在没有包装高阶组件的情况下使用所有提供的微调器。 只需使用我们的 API 规范中所示的命名导入即可。

Versioning

我们使用 SemVer 进行版本控制。

Build StatusCoverage Statusnpm versionMaintainabilityJavavaScript Style Guidestyle: styled-components

Githubapi docs

react-hoc-spinners

react-hoc-spinners is a simple loading spinner library for your React projects.

Installation

npm i --save @4so-fourseasons/react-hoc-spinners

Usage

For detailed information about each component/function have a look at our API

Note: You can either use named imports of each respective component/function or use the default import with dot notation.

Default use case

In most cases you will want to use the provided makeWithLoadingSpinner factory function. This provides you with a higher-order component which you can use to wrap your Components with a loading spinner whenever the provided condition is true.

Example

import { makeWithLoadingIndicator } from '@4so-fourseasons/react-hoc-spinners'

import MyComponent from '<some-path>/MyComponent'

const withLoadingIndicator = makeWithLoadingIndicator({
    condition: ({ loading } => loading
})

// Export wrapped component
export default withLoadingIndicator(MyComponent)

Spinner without HOC

It is also possible to use all provided spinners without a wrapping higher-order component, in case you want to implement all logic yourself. Just use named imports as shown in our API spec.

Versioning

We use SemVer for versioning.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文