@aboutbits/react-toolbox 中文文档教程

Question

React Toolbox

该软件包包括支持您完成常见任务的不同工具。

Table of content

• Usage
• useInterval
• Async Data
• LocationProvider
• useMatchMediaQuery
• Build & Publish
• Information

Usage

首先，您必须安装软件包：

npm install @aboutbits/react-toolbox

其次，您可以使用不同的工具。

useInterval

useInterval 挂钩以指定的时间间隔调用函数。 这个钩子的代码来自 Dan Abramov 的博文。

该钩子有两个参数：

• callback: The callback function that should be executed.
• delay: The delay in milliseconds or null, if the interval should be paused.

import React, { useState } from 'react'
import { useInterval } from '@aboutbits/react-toolbox'

const MyCommponent = () => {
  const [step, setStep] = useState(10)

  useInterval(() => {
    setStep(step - 1)
  }, step === 0 ? null : 1000)

  return <p>Countdown: {step}</p>
}

Async Data

这部分包括一个实用程序组件，可用于根据异步状态呈现加载、成功和错误视图。

import React, { useEffect } from 'react'
import { AsyncView } from '@aboutbits/react-toolbox'

type Data = {
    greeting: string
}

type Error = {
    message: string
}

const MyCommponent = () => {
    const [data, setData] = useState<Data | undefined>()
    const [error, setError] = useState<Error | undefined>()

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => setData(response.json()))
            .catch(error => setError(error))
    })

    return (
        <AsyncView
            data={data}
            error={error}
            renderLoading={<div>Loading</div>}
            renderSuccess={(data) => <div>{data.greeting}</div>}
            renderError={(error) => <div>{error.message}</div>} />
    );
}

并使用 SWR：

import React, { useEffect } from 'react'
import { useSWR } from 'swr'
import { AsyncView } from '@aboutbits/react-toolbox'

type Data = {
    greeting: string
}

type Error = {
    message: string
}

const MyCommponent = () => {
    const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/1')

    return (
        <AsyncView
            data={data}
            error={error}
            renderLoading={'Loading'}
            renderSuccess={'Success'}
            renderError={'Error'} />
    );
}

LocationProvider

这部分包括一个 React 上下文，它以给定的时间间隔获取地理位置。

import { LocationProvider } from '@aboutbits/react-toolbox'

const MyApp = () => {

  return (
    <LocationProvider highAccuracy={true} delay={20000}>
      {children}
    </LocationProvider>
  )
}

context provider 有两个属性：

• highAccuracy: defines if the location should be fetched with high accuracy. Read more on the Geolocation API doc.
• delay: the delay in milliseconds between each fetch

import { useContext } from 'react'
import { LocationContext } from '@aboutbits/react-toolbox'

const MyComponent = () => {
  const { location } = useContext(LocationContext)

  return location 
      ? <div>Your location is: {location.coords.latitude}, {location.coords.longitude}</div>
      : <div>Unable to get your location</div>
}

useMatchMediaQuery

这个钩子基于 window.matchQuery API，可以用来查明某个媒体查询是否与当前窗口匹配。

import { useMatchMediaQuery } from '@aboutbits/react-toolbox'

const TestComponent = () => {
  const matches = useMatchMediaQuery('(min-width : 500px)')
  if (matches) return <div>visible</div>
  return null
}

Build & Publish

要发布包，请提交所有更改并将它们推送到 main。 然后在本地运行以下命令之一：

npm version patch
npm version minor
npm version major

Information

About Bits 是一家位于意大利南蒂罗尔的公司。 您可以在我们的网站上找到更多关于我们的信息。

Support

如需支持，请联系 info@aboutbits.it。

Credits

• Martin Malfertheiner
• Alex Lanz
• All Contributors

License

麻省理工学院许可证（麻省理工学院）。 请参阅许可文件了解更多信息。