npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proste-react-use

v4.0.1

Published

Eeasy to use react hooks

Downloads

175

Readme

中文|EN

更多使用方法可以查看测试中的示例

生命周期

只有在加载时触发一次

配合 Suspense 组件使用 可以使用任意的 Promise 函数 key 需要是一个唯一值, 如果你想复用父组件的信息可以使用和父组件相同的 key

只有在依赖更新(除了第一次)触发

Web API

requestAnimationFrame hook

获取当前内存信息。 useMemory使用的是performance.memory API,是谷歌浏览器提供的非标准扩展,注意使用方式!

创建一个IntersectionObserver的API,useIntersectionObserver和useIntersectionObserverState的区别是useIntersectionObserver通过回调获取信息,useIntersectionObserverState会将回调的内容作为state返回。两者都可以中断监听和恢复监听。

可以通过 ref 绑定某个 input 节点复制对应的 value 值, 这个在非受控节点 上会非常有用。 或者通过 copyToClipboard 复制到粘贴板

屏幕取色器,可以获取当前屏幕上选中区域的颜色。

web socket hook

BroadcastChannel 通讯 API

动画

数字缓动动画 内置部分缓动动画函数

状态

比较相同 context 判断返回数据是否有变化进行渲染 依赖 use-context-selector。 使用 use-context-selector 的 createContext 创建 context。

Map 和 Set的hook实现

WeakMap 和 WeakSet的hook实现

工具

解码jwt hook

倒计时信息。如果设置了 targetDate 后继续配置 days 等参数 会在 targetDate 的基础上累加。

可以主动调用的延迟函数,返回一个函数,函数执行延迟调用传入的函数。

发布订阅钩子,实例只在全局初始化一次。

异步函数锁,在异步函数执行完成执行不会再执行,会返回一个 undefind。

格式化货币金额

将各种类型的数据合并成一个 string 类型返回用于 className