开源工具，Github开源项目排行

搜索 TinyTools

用户界面

用户界面

useAudio

创建 <audio> 元素，追踪其状态并暴露播放控件。

用法

jsx 复制代码 
import {useAudio} from 'react-use';

const Demo = () => {
  const [audio, state, controls, ref] = useAudio({
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    autoPlay: true,
  });

  return (
    <div>
      {audio}
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
      <br/>
      <button onClick={controls.mute}>Mute</button>
      <button onClick={controls.unmute}>Un-mute</button>
      <br/>
      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>
      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>
      <button onClick={() => controls.volume(1)}>Volume: 100%</button>
      <br/>
      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
    </div>
  );
};

参考

jsx 复制代码 
const [audio, state, controls, ref] = useAudio(props);
const [audio, state, controls] = useAudio(<audio {...props}/>);

audio 是 React 的 <audio> 元素，你必须在渲染树中的某处插入，例如：

jsx 复制代码 
<div>{audio}</div>

state 追踪音频的状态，并具有以下状态：

json 复制代码 
{
  "buffered": [
    {
      "start": 0,
      "end": 425.952625
    }
  ],
  "time": 5.244996,
  "duration": 425.952625,
  "isPlaying": false,
  "muted": false,
  "volume": 1
}

controls 是一个方法列表集合，运行你控制音频的播放，它有以下接口：

ts 复制代码 
interface AudioControls {
  play: () => Promise<void> | void;
  pause: () => void;
  mute: () => void;
  unmute: () => void;
  volume: (volume: number) => void;
  seek: (time: number) => void;
}

ref 是对 HTML <audio> 元素的 React 引用，你可以通过 ref.current 访问该元素，注意它可能是 null。

最后，props — <audio> 接收所有的属性。

useClickAway

当用户在目标元素外部单击时，React UI 钩子触发回调。

Usage

jsx 复制代码 
import {useClickAway} from 'react-use';

const Demo = () => {
  const ref = useRef(null);
  useClickAway(ref, () => {
    alert('OUTSIDE CLICKED');
  });

  return (
    <div ref={ref} style={{
      width: 200,
      height: 200,
      background: 'red',
    }} />
  );
};

useCss

React 副作用钩子，用于 [CSS 动态][gen-5] 改变。

用法

jsx 复制代码 
import {useCss} from 'react-use';

const Demo = () => {
  const className = useCss({
    color: 'red',
    border: '1px solid red',
    '&:hover': {
      color: 'blue',
    },
  });

  return (
    <div className={className}>
      Hover me!
    </div>
  );
};

useDrop and useDropArea

触发文件，链接删除和复制粘贴。

useDrop跟踪整个页面的事件，useDropArea跟踪特定元素的拖放事件。

Usage

useDrop:

jsx 复制代码 
import {useDrop} from 'react-use';

const Demo = () => {
  const state = useDrop({
    onFiles: files => console.log('files', files),
    onUri: uri => console.log('uri', uri),
    onText: text => console.log('text', text),
  });

  return (
    <div>
      Drop something on the page.
    </div>
  );
};

useDropArea:

jsx 复制代码 
import {useDropArea} from 'react-use';

const Demo = () => {
  const [bond, state] = useDropArea({
    onFiles: files => console.log('files', files),
    onUri: uri => console.log('uri', uri),
    onText: text => console.log('text', text),
  });

  return (
    <div {...bond}>
      Drop something here.
    </div>
  );
};

useFullscreen

在iOS上为全屏视频显示一个元素全屏、可选回退。

Usage

jsx 复制代码 
import useFullscreen from 'react-use/lib/useFullscreen';
import useToggle from 'react-use/lib/useToggle';

const Demo = () => {
  const ref = useRef(null)
  const [show, toggle] = useToggle(false);
  const isFullscreen = useFullscreen(ref, show, {onClose: () => toggle(false)});

  return (
    <div ref={ref} style={{backgroundColor: 'white'}}>
      <div>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
      <button onClick={() => toggle()}>Toggle</button>
      <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />
    </div>
  );
};

Reference

ts 复制代码 
useFullscreen(ref, show, {onClose})

useSpeech

React 用户界面钩子，用于合成说出给定字符串的人声。

用法

jsx 复制代码 
import {useSpeech} from 'react-use';

const Demo = () => {
  const state = useSpeech('Hello world!');

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>  
  );
};

useVideo

创建 <video> 元素，追踪其状态并暴露播放控件。

用法

jsx 复制代码 
import {useVideo} from 'react-use';

const Demo = () => {
  const [video, state, controls, ref] = useVideo(
    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />
  );

  return (
    <div>
      {video}
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
      <br/>
      <button onClick={controls.mute}>Mute</button>
      <button onClick={controls.unmute}>Un-mute</button>
      <br/>
      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>
      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>
      <button onClick={() => controls.volume(1)}>Volume: 100%</button>
      <br/>
      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
    </div>
  );
};

参考

jsx 复制代码 
const [video, state, controls, ref] = useVideo(props);
const [video, state, controls, ref] = useVideo(<video {...props}/>);

video 是 React 的 <video> 元素，你必须在渲染树中的某处插入，例如：

jsx 复制代码 
<div>{video}</div>

state 追踪音频的状态，并具有以下状态：

json 复制代码 
{
  "buffered": [
    {
      "start": 0,
      "end": 425.952625
    }
  ],
  "time": 5.244996,
  "duration": 425.952625,
  "isPlaying": false,
  "muted": false,
  "volume": 1
}

controls 是一个方法列表集合，运行你控制视频的播放，它有以下接口：

ts 复制代码 
interface AudioControls {
  play: () => Promise<void> | void;
  pause: () => void;
  mute: () => void;
  unmute: () => void;
  volume: (volume: number) => void;
  seek: (time: number) => void;
}

ref 是对 HTML <video> 元素的 React 引用，你可以通过 ref.current 访问该元素，注意它可能是 null。

最后，props — <video> 接收所有的属性。

useWait

useWait 是一个 React 钩子，可以帮助管理页面上的多个加载状态而不会产生任何冲突。它基于一个通过管理多个加载状态 Array 的简单想法。内置的 Wait 组件监听其注册的加载器并立即进入加载状态。

用法

jsx 复制代码 
import { useWait } from 'react-use'

function UserCreateButton() {
  const { startWaiting, endWaiting, isWaiting, Wait } = useWait();

  return (
    <button
      onClick={() => startWaiting("creating user")}
      disabled={isWaiting("creating user")}
    >
      <Wait on="creating user" fallback={<div>Creating user!</div>}>
        Create User
      </Wait>
    </button>
  );
}

你应该用 Waiter 组件包装你的 App。它其实是一个 Context.Provider，提供一个加载上下文给组件树。

jsx 复制代码 
const rootElement = document.getElementById("root");
ReactDOM.render(
  <useWait.Waiter>
    <App />
  </useWait.Waiter>,
  rootElement
);

React Hook

传感器
用户界面
动画效果
副作用
生命周期
状态