反应加载

使用 React 的简单且可访问的加载指标 .

与反应组件捆绑在一起 Sam Herbert的动画 SVG 加载器 在可动摇的树上.

安装

npm i @agney/react-loading
# OR
yarn add @agney/react-loading

演示

特征

• 小号

  整个图书馆都是关于 20kB 已微调。 。 。 . 但你不会需要整个包.

  库是用来摇摆树木的 当你使用一两个被捆绑的加载器时, 你就会有不到1克B的被捆绑.

• 无障碍

  提供您装入组件和容器的无障碍属性.

  aria-busy 设置为 true 载货量和进度指标 role=progressbar。 。 。 .

• 指定全局加载器

  您可能不希望加载器组件在任何地方混合,所以您可以指定一个 LoaderContext 如果有必要,以后可以推翻.

• 带上你自己的装载机

  如果你决定带上自己的加载指示器,库也会支持这一点,保持所有逻辑不变.

• 类型脚本支持. 零额外CSS.

使用量

import { useLoading, Audio } from '@agney/react-loading';

function Content() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
    indicator: <Audio width="50" />,
  });

  return (
    {/* Accessibility props injected to container */}
    <section {...containerProps}>
      {indicatorEl} {/* renders only while loading */}
    </section>
  );
}

装入器

这个库与 React 组件捆绑在一起 Sam Herbert的动画 SVG 加载器 在可动摇的树上.

每个装载机都是SVG,所通过道具应被应用到顶部SVG元件上. 所有 SVG 将被设定为继承 currentColor 从它的父母的填充/中空.

可用的装载器有:

import {
  Audio,
  BallTriangle,
  Bars,
  Circles,
  Grid,
  Hearts,
  Oval,
  Puff,
  Rings,
  SpinningCircles,
  TailSpin,
  ThreeDots,
} from '@agney/react-loading';

使用Webpack/Rollup等捆绑器时,只包含您使用的那些.

A. 背景情况

您可以指定单个加载指示器, 并使用 LoaderProvider。 。 。 .

import { LoaderProvider, useLoading, BallTriangle } from '@agney/react-loading';

function App() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
  });
  return <section {...containerProps}>{indicatorEl}</section>;
}

ReactDOM.render(
  <LoaderProvider indicator={<BallTriangle width="50" />}>
    <App />
  </LoaderProvider>
);

你可以用这么多 LoaderProvider 您喜欢的提供者元素和React会选择最接近您正在渲染的钩子的元素.

更多关于反应背景

装入器上的额外道具

如果您想在装入器上提供特定的道具, 使用钩子时:

useLoading({
  loading: true,
  loaderProps: {
    // Any props here would be spread on to the indicator element.
    style: {{ margin: '0 auto' }}
  }
});

我们还为 valueText,用于描述:

useLoading({
  loading: true,
  loaderProps: {
    valueText: 'Fetching video from the Great Internet',
  },
});

// now this will generate:
/* <svg role="progressbar" aria-valuetext="Fetching video from the Great Internet"></svg>*/

aria-valuetext 将被屏幕阅读者读取.

您也可以提供 aria-valuenow (但预先捆绑的指标最适合不确定的进展指标)

用于参考的 MDN progressbar

带上你自己的装载机

只要将导入切换到您自己的加载指示器( 只要确保它接受道具)

import { LoaderProvider, useLoading } from '@agney/react-loading';

const Loader = ({ ...rest }) => <p {...rest}>Loading...</p>;

function App() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
  });
  return <section {...containerProps}>{indicatorEl}</section>;
}

ReactDOM.render(
  <LoaderProvider indicator={<Loader />}>
    <App />
  </LoaderProvider>
);

捐款

所有公关都欢迎.

发展

我们用 tsdx 用来生产锅炉板.

安装 :

# Library
npm i

# Example
cd example && npm i

发展:

# Running library dev
npm start

# Running example
cd example && npm start

测试 :

测试 react-testing-library 财务报告和审定财务报表 jest

npm test

在tsdx寄存器上可以详细获取命令.